html - 请问css 中一个元素能做出这种选中效果么？

问题描述

问 题

如果做不出，也可以两个元素，最好不要绝对定位

解决方案

首先是不太可能只用一個元素，因為想要實現自定義的 radio 或是 checkbox 時，都得靠 label 的 for 來實現，就是隱藏實際 input ，然後自定義 label 的樣式來實現，所以至少得兩個。

實現

<input name="radios" class="circle-radio" type="radio" id="radio1"/><label for="radio1"></label>

<input name="radios" class="circle-radio" type="radio" id="radio2"/><label for="radio2"></label>

.circle-radio {
  visibility: hidden;
}

.circle-radio + label {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #00AAFF;
}

.circle-radio:checked + label {
  display: block;
  background: #00AAFF;
  box-shadow: inset 0px 0px 0px 6px white;
}

这篇关于html - 请问css 中一个元素能做出这种选中效果么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！