Home  >  Article  >  Web Front-end  >  How to customize the radio button style with css? (Code)

How to customize the radio button style with css? (Code)

不言
不言Original
2018-08-21 14:57:425006browse

The content of this article is about how to customize the radio button style with css? (Code implementation) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

html part

<div>
    <label>
        <input>
        <span>
            <span>
                <span></span>
            </span>
        </span>
        <span>LOVE</span>
    </label>
    <label>
        <input>
        <span>
            <span>
                <span></span>
            </span>
        </span>
        <span>YOU ARE NICE</span>
    </label>
</div>

css style part

            .radio {
                width: 260px;
                height: 26px;
                line-height: 26px;
                margin: 200px auto;
                background-color: #ddeef1;
                font-size: 16px;
                color: #495060;
                text-align: center;
            }        
            label:first-child {
                margin-right: 40px;
            }
            label input, .radio_on {
              display: none;
            }            
            .pos {
                display: inline;
                vertical-align: middle;
            }        
            .radio_bg {
              position: relative;
              display: inline-block;
              height: 14px;
              width: 14px;
              border: 1px solid #B3B4B8;
              border-radius: 50%;
            }        
            label:hover .radio_bg, label input:checked + span.pos span.radio_bg {
              border: 1px solid #27B28B;
            }        
            label input:checked + span.pos span.radio_bg .radio_on {
              display: inline-block;
              position: absolute;
              top: 2px;
              left: 2px;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: #27B28B;
            }

Rendering

How to customize the radio button style with css? (Code)

Related recommendations:

How to beautify the style of HTML checkbox and radio

Detailed example of using CSS to customize radio and checkbox styles

The above is the detailed content of How to customize the radio button style with css? (Code). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn