css, javascript, html

[css] input radio 라디오 버튼 커스텀 스타일 / 라디오버튼 내맘대로 디자인 하기

서산개백수 2023. 4. 27. 22:42

 

[css] input radio 라디오 버튼 커스텀 스타일 / 라디오버튼 내맘대로 디자인 하기

css 라디오버튼, 라디오버튼 커스텀, radio custom, input radio

 

radio style 1

html

 
<div className='radioButtonStyle'>
    <label className='radioStyle'>
        <input type="radio" name="radio"/>
        <span>Normal 1</span>
    </label>
    <label className='radioStyle'>
        <input type="radio" name="radio"/>
        <span>Normal 2</span>
    </label>
    <label className='radioStyle'>
        <input type="radio" name="radio" disabled/>
        <span>Normal 3</span>
    </label>
</div>
 

css

 
.radioButtonStyle{
    display: flex;
    flex-direction: row;
}

.radioStyle{
    font-size:14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0px 10px 0px 10px;
}

.radioStyle span{
    margin-left:10px;
}

.radioStyle [type="radio"]{
    appearance: none;
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    border:2px solid #dcdcdc;
    border-radius: 250px;
    width:15px;
    height:15px;
}

.radioStyle [type="radio"]:checked{
    box-sizing: border-box;
    border:5px solid #ee8432;
}

.radioStyle [type="radio"]:disabled{
    background-color: #dcdcdc;
}

.radioStyle [type="radio"]:disabled + span{
    color:#dcdcdc;
}
 

 

radio style 2

html

 
<div className='radioButtonStyle'>
    <label className='radioStyle'>
        <input type="radio" checked name="radio"/>
        <span>Box 1</span>
    </label>

    <label className='radioStyle'>
        <input type="radio" name="radio"/>
        <span>Box 2</span>
    </label>

    <label className='radioStyle'>
        <input type="radio" disabled name="radio"/>
        <span>Box 3</span>
    </label>
</div>
 

css

 
.radioButtonStyle{
    display: flex;
    flex-direction: row;
}

.radioStyle{
    font-size: 14px;
    margin:0px 5px 0px 5px;
}

.radioStyle [type="radio"]{
    display: none;
}

.radioStyle span{
    text-align: center;
    height:40px;
    width:100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:1px solid #dcdcdc;
    box-sizing: border-box;
}

.radioStyle [type="radio"]:checked + span{
    border:3px solid #ee8432;
    color:#ee8432;
    font-weight: 700;
}

.radioStyle [type="radio"]:disabled + span{
    text-align: center;
    height:40px;
    width:100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:1px solid #f3f3f3;
    background-color: #f3f3f3;
    color:#dcdcdc;
    box-sizing: border-box;
}
 

 

radio style 3

html

 
<div className='radioButtonStyle'>
    <label className='radioStyle'>
        <input type="radio" name="radio" checked/>
        <span>
            <div/>
            <p>Box 1</p>
        </span>
    </label>
    <label className='radioStyle'>
        <input type="radio" name="radio"/>
        <span>
            <div/>
            <p>Box 2</p>
        </span>
    </label>
    <label className='radioStyle'>
        <input type="radio" name="radio" disabled/>
        <span>
            <div/>
            <p>Box 3</p>
        </span>
    </label>
</div>
 

css

 
.radioButtonStyle{
    display: flex;
    flex-direction: row;
}

.radioStyle{
    font-size: 14px;
    margin:0px 10px 0px 10px;
}

.radioStyle [type="radio"]{
    display: none;
}

.radioStyle span{
    text-align: center;
    height: 40px;
    width:120px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border:1px solid #dcdcdc;
    border-radius: 50px;
    color:#dcdcdc;
}

.radioStyle span>div{
    border:2px solid #dcdcdc;
    border-radius: 250px;
    width:15px;
    min-width: 15px;
    max-width: 15px;
    height: 15px;
    min-height: 15px;
    max-height: 15px;
    box-sizing: border-box;
    margin:0px 15px 0px 15px;
}

.radioStyle p{
    width: 100%;
    text-align: right;
    padding-right:15px;
    box-sizing: border-box;
}

.radioStyle [type="radio"]:checked + span{
    border:1px solid #323232;
    background-color: #323232;
    color:#ffffff;
    font-weight: 700;
}

.radioStyle [type="radio"]:checked + span >div{
    border:3px solid #ffffff;
    border-radius: 250px;
    width:15px;
    min-width:15px;
    max-width: 15px;
    height: 15px;
    min-height: 15px;
    max-height: 15px;
    box-sizing: border-box;
}

.radioStyle [type="radio"]:disabled + span{
    border:1px solid #f3f3f3;
    background-color: #f3f3f3;
    color:#dcdcdc;
}
 

 

radio style 4

html

 
<div className='radioButtonStyle'>
    <label className='radioStyle'>
        <input type="radio" name="radio" checked/>
        <span>
            <div className='rsTitle'>
                <div>TITLE 1</div>
                <p/>
            </div>
            <div className='rsContents'>
                radio button contents
            </div>
        </span>
    </label>
    <label className='radioStyle'>
        <input type="radio" name="radio"/>
        <span>
            <div className='rsTitle'>
                <div>TITLE 2</div>
                <p/>
            </div>
            <div className='rsContents'>
                radio button contents
            </div>
        </span>
    </label>
    <label className='radioStyle'>
        <input type="radio" name="radio" disabled/>
        <span>
            <div className='rsTitle'>
                <div>TITLE 3</div>
                <p/>
            </div>
            <div className='rsContents'>
                radio button contents
            </div>
        </span>
    </label>
</div>
 

css

 
.radioButtonStyle{
    display: flex;
    flex-direction: row;
}

.radioStyle{
    font-size: 14px;
}

.radioStyle [type='radio']{
    display: none;
}

.radioStyle span{
    text-align: center;
    height: auto;
    width:150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 15px;
    background-color: #ffffff;
    margin:10px;
    padding:15px;
    box-shadow: 3px 3px 10px #dcdcdc;
    border:2px solid #ffffff;
}

.rsTitle{
    display: flex;
    flex-direction: row;
    width:100%;
    font-weight: 700;
    font-size: 16px;
    padding:5px 0px 15px 0px;
    align-items: center;
}

.rsTitle >div{
    width: 100%;
    text-align: left;
}

.rsTitle >p{
    margin:0px;
    width:15px;
    min-width:15px;
    max-width: 15px;
    height:15px;
    min-height: 15px;
    max-height: 15px;
    border:5px solid #dcdcdc;
    box-sizing: border-box;
    border-radius: 250px;
}

.rsContents{
    width:100%;
    text-align: left;
    font-size: 13px;
    padding-bottom:5px;
}

.radioStyle [type='radio']:checked + span{
    border:2px solid #ee8432;
    background-color: #fff5ee;
}

.radioStyle [type='radio']:checked + span >div > p{
    border:5px solid #ee8432;
    width:100%;
    height:100%;
}

.radioStyle [type='radio']:disabled + span{
    color:#dcdcdc;
}

.radioStyle [type='radio']:disabled + span > div >p{
    background-color: #f3f3f3;
    border:0px;
    width:100%;
    height:100%;
}