2025年css实现自定义复选框-HTML特殊字符实现

科技前沿 • 2025-02-11 09:31 • 阅读 52

大家好，我是讯享网，很高兴认识大家。

讯享网

主要使用HTML特殊字符实现（豆友贡献 https://www.douban.com/group/topic//），但是有兼容性问题，改进三次。

图一交互图

图二使用9744/9745，展示效果不错，使用css最少，但是vivo某一手机兼容性问题严重，显示错误（是个❌？？？，不晓得为什么）。

图二使用2713，完全不可取的写法，样式哪里有问题改哪里，导致各个手机浏览器显示都不同，七扭八歪的?。

图三也是2713，但是使用了label标记input，最终方案。

PS：当时input没有起id，label标记的是input的name，input{display：none}之后怎么点击都不能选中checkbox，但是注释display时，点击label是可以选中checkbox（这种情况就导致好久没定位到问题，我的锅?）。但是为什么标记的是name，注释display时也可以选中checkbox，i dont know。

各位，坑都填平了，去吧皮卡丘。

图一

<span class="protocal-tip"> <span v-if="!choose" @click="isChoose" class="choose">&#9744</span> <span v-if="choose" @click="isChoose" class="choose">&#9745</span> <span class="read">已<span class="agreement" @click="jumpAutoProtocol">议</span>并</span> </span> data: choose: false isChoose() { this.choose = !this.choose; this.$emit('is-auto-pay',this.choose); // 传值给父组件 }

讯享网

讯享网.protocal-tip { font-size: 12px; .agreement { color: #397BE6; } .choose{ font-size: 18px; color: #B48F4E; } }

图二

<span class="protocal-tip"> <label @click="isChoose"><input type="checkbox" name="box"></label> <span class="read">已<span class="agreement" @click="jumpAutoProtocol">议</span>并</span> </span> isChoose() { let check = document.getElementsByName('box'); // check是数组，写为check[0] this.$emit('is-auto-pay',check[0].checked); // 传值给父组件 }

讯享网.protocal-tip { position: relative; font-size: 12px; .agreement { color: #397BE6; } .read { margin-left: 16px // 解决居中问题 } label input { appearance: none; // 隐藏本来样式 -moz-appearance: none; -webkit-appearance: none; outline: none; // 去掉蓝色outline position: absolute; width: 12px; height: 12px; border: 1px solid #B48F4E; } label input:after { position: absolute; // 相对于input定位 top: -2px; font-size: 10px; content: "\2713"; // 如果选中再显示对号，input位置会变动 color: #fff; } label input:checked:after { // 选中的input的伪元素 color: #B48F4E; } }

图三

<span class="protocal-tip"> <input type="checkbox" name="box" id="box"> <label for="box" @click="isChoose"></label> 已<span class="agreement" @click="jumpAutoProtocol">议</span>并 </span> isChoose() { let check = document.getElementsByName('box'); // 第一次点击label时，checkbox还没选中，所以先输出false，之后选中checkbox，所以传值!check[0].checked。 this.$emit('is-auto-pay',!check[0].checked); // 传值给父组件 }

讯享网.protocal-tip { position: relative; font-size: 12px; .agreement { color: #397BE6; } label { display: inline-block; width: 12px; height: 12px; border: 1px solid #B48F4E; } input { display: none; } input+label:after { content: "\2713"; color: #FFF; } input:checked+label:after { color: #B48F4E; } }

2025年css实现自定义复选框-HTML特殊字符实现

图一

图二

图三

相关推荐