标签：html 透明 inter trap info 做了 标签 位置 分享图片
话不多说，直入主题。众所周知原生的checkbox复选框、radio单选按钮、select选择框，不同浏览器差别较大，最重要的一点是不怎么好看，如果直接拿原生用，可能会影响整体的美观。项目中用的第三方UI这些都已经很完备，但是在小型项目不想采用第三方UI或者使用的是Bootstrap等没有定制的checkbox样式时，就需要自己去做一个对应的复选框了。本次本着让你改动最小的情况下用纯CSS做了一个相对美观的checkbox复选框。如下图：
下面直接放代码：
HTML部分：
<label for="my_checkboc"> <input type="checkbox" id="my_checkboc" class="my_checkbox"> <!--增加的一个自定义复选框元素span只要在其上应用样式--> <span class="new_checkbox"></span> 复选框1 </label>
注意，这个HTML结构，label标签最外层，里面包含一个原生checkbox和一个需要自定义样式的span，用来定义checkbox样式。
CSS部分：
label { position: relative; } label .new_checkbox { display: block; width: 14px; height: 14px; border: 1px solid #d9d9d9; border-radius: 2px; background-color: #fff; position: absolute; top: 4px; left: 2px; z-index: 1; cursor: pointer; -webkit-transition: all .2s; transition: all .2s; } label .new_checkbox:hover { border-color: #1890ff; } .my_checkbox { opacity: 0; } .my_checkbox:checked+span { border-color: #1890ff; background-color: #1890ff; } /*关联checkbox的值*/ .my_checkbox:checked+span::before { content: ""; display: block; width: 6px; height: 10px; border-bottom: 2px solid #fff; background-color: #1890ff; border-right: 2px solid #fff; transform: rotate(45deg); position: absolute; top: 0; left: 4.5px; box-sizing: border-box; }
定义好span的样式，定位到合适的位置，对原来的checkbox设置透明的为0，这样样式部分就可以了。下一步就是把点击选中加进去。由于lable和checbox时绑定的，故点击label区域，即可将改checkbox选中，此时需要对自定义的span添加选中样式即可。用css “+”选择器，如代码中所示，在checkbox选中时，其后一个span元素将会添加：before伪类，显示选中的图标。图中的选中对勾图标为只有有边框和下边框的长方体旋转而成。
如有疑问请留言，这个时暂时这样写，后面会更新，以及相关的纯css打造的radio复选框和js打造的select单选框，供大家参考。
标签：html 透明 inter trap info 做了 标签 位置 分享图片
原文地址：https://www.cnblogs.com/websharehome/p/9594088.html
