html元素中checkbox与radio元素的样式在每个浏览器中显示的效果是不同的,为了统一它们在各个品牌浏览器中的显示样式,我们可以对它们做个简单的美化。

html checkbox 元素美化实例:

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

html中checkbox与radio样式美化的简单实例

示例代码:

<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>

html radio 元素美化实例:

美化 radio 元素与美化 checkbox 元素没有太大的区别,其原理都是利用了CSS中的相邻兄弟元素选择器,不同的是元素选中后的样式区别!

html中checkbox与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>