html教程 内容:16

html中checkbox与radio样式css美化

  • 查看作者
  • html中的input标签的type属性checkbox和radio是网页常用的属性,不过它们默认样式不怎么好看,而且不同浏览器显示的效果也不一样,为了统一样式,我们对这二个属性值进行美化装饰下。

    实例代码

    checkbox元素美化:
    <style>  
        label{
            font-size: 14px;
            height: 25px;
            line-height: 25px;
            box-sizing: border-box;
            margin-right: 20px;
        }
        input[type="checkbox"]   
        {   
            display: none;   
        }   
        
        /*定义 checkbox 元素相邻元素 span 样式*/
        input[type="checkbox"] + span   
        {   
            display: inline-block;
            position: relative;
            border: 1px solid #99a1a7;
            width: 15px;
            height: 15px;
            line-height: 15px;
            border-radius: 4px;
            overflow: hidden;
            box-sizing: border-box;
            margin: 0 5px 0 0;
        }   
        /*定义 checkbox 元素相邻元素 span 样式伪类的样式*/
        input[type="checkbox"]:checked + span:after   
        {   
            content: '\2714'; /*如果想更好看一点,这里可以使用一亲图片或字体标等来美化一下选择效果*/
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            font-size: 14px;
            color: green;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
        }
    </style>  
    <label>
        <input type="checkbox" name="" id="">
        <span></span>老翰
    </label>
    <label>
        <input type="checkbox" name="" id="">
        <span></span>小翰
    </label>
    radio元素美化:
    <style>  
        label{
            font-size: 14px;
            height: 25px;
            line-height: 25px;
            box-sizing: border-box;
            margin-right: 20px;
        }
        input[type="radio"]   
        {   
            display: none;   
        }   
        
        /*定义 radio 元素相邻元素 span 样式*/
        input[type="radio"] + span   
        {   
            display: inline-block;
            position: relative;
            border: 1px solid #99a1a7;
            width: 15px;
            height: 15px;
            line-height: 15px;
            border-radius: 50%;
            overflow: hidden;
            box-sizing: border-box;
            margin: 0 5px 0 0;
        }   
        /*定义 radio 元素相邻元素 span 样式伪类的样式*/
        input[type="radio"]:checked + span{
            border:1px solid green;
        }
        input[type="radio"]:checked + span:after   
        {   
            content: ' ';
            box-sizing: border-box;
            position: absolute;
            left: 2px;
            top: 2px;
            width: 9px;
            height: 9px;
            background-color: green;
            border-radius: 50%;
        }
    </style>  
    <label>
        <input type="radio" name="host" >
        <span></span>老翰
    </label>
    <label>
        <input type="radio" name="host" >
        <span></span>小翰
    </label>

    以上纯CSS代码实现的checkbox和radio元素美化,原理就是只需要隐藏掉选择元素,并使用css中的相邻兄弟选择器,来控制下一个兄弟元素即可。

    请登录之后再进行评论

    登录
    最新评论