我正在尝试将一个字母放入一个单选按钮(使用 Materialise 框架),例如 image 中的 A 和 B .
我该怎么做?
最佳答案
这是自定义单选按钮。
查看 css 中给出的注释。
input[type="radio"] {
width: 30px;
height: 30px;
border-radius: 15px;
border: 2px solid #1FBED6;
background-color: white;
-webkit-appearance: none; /*to disable the default appearance of radio button*/
-moz-appearance: none;
}
input[type="radio"]:focus { /*no need, if you don't disable default appearance*/
outline: none; /*to remove the square border on focus*/
}
input[type="radio"]:checked { /*no need, if you don't disable default appearance*/
background-color: #1FBED6;
}
input[type="radio"]:checked ~ span:first-of-type {
color: white;
}
label span:first-of-type {
position: relative;
left: -27px;
font-size: 15px;
color: #1FBED6;
}
label span {
position: relative;
top: -12px;
}
<label>
<input type="radio" name="options"/>
<span>A</span><span>Option A</span>
</label>
<br/>
<label>
<input type="radio" name="options"/>
<span>B</span><span>Option B</span>
</label>
<br/>
<label>
<input type="radio" name="options"/>
<span>C</span><span>Option C</span>
</label>
<br/>
<label>
<input type="radio" name="options"/>
<span>D</span><span>Option D</span>
</label>
关于css - 如何将文本放入单选按钮内?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45259139/