html元素中checkbox与radio元素的样式在每个浏览器中显示的效果是不同的,为了统一它们在各个品牌浏览器中的显示样式,我们可以对它们做个简单的美化。
html checkbox 元素美化实例:
使用纯CSS代码就可以实现 checkbox 元素的美化,只需要隐藏掉 checkbox 选择元素,并使用css中的相邻兄弟选择器,来控制他的下一个兄弟元素即可!
示例代码:
<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中的相邻兄弟元素选择器,不同的是元素选中后的样式区别!
示例代码:
<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>