Question

如何使每个单选按钮旁边的unicode字符像单选按钮一样，换句话说，将默认的单选按钮样式更改为unicode？ HTML

<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-2">
<li>
<input type="radio" name="good_bad" value="good" style="visibility:none;"><div style="border:1px solid #00FF00;border-radius:16px;padding:0.5px;font-size:2.5em;color:#00FF00;">&#9786;</div>
</li>
<li>
<input type="radio" name="good_bad" value="bad" style="visibility:none;"><div style="border:1px solid #FF0000;border-radius:16px;padding:0.5px;font-size:2.5em !important;color:#FF0000;">&#9785;</div> 
</li>

</ul>

Answer 1

我会查看此示例以寻求帮助： http://cssdeck.com/labs/ldmtsmfk

Answer 2

不确定我是否理解正确但是如何：

<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-2">
<li>
<label><div style="border:1px solid #00FF00;border-radius:16px;padding:0.5px;font-size:2.5em;color:#00FF00;"><input type="radio" name="good_bad" value="good" style="visibility:none;">&#9786;</div></label>
</li>
<li>
<label><div style="border:1px solid #FF0000;border-radius:16px;padding:0.5px;font-size:2.5em !important;color:#FF0000;"><input type="radio" name="good_bad" value="bad" style="visibility:none;">&#9785;</div></label>
</li>

</ul>

Answer 3

怎么样？

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html{
    font-size:11px;
}
form select, form input[type="text"]{
    padding:3px 5px;
    border-radius:4px;
    border:1px solid #ccc;
    line-height:1;
    font-size:2rem;
    box-sizing: border-box;
    font-weight:300;
}
input[type="checkbox"],input[type="radio"]{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    line-height:1;
    font-size:2rem;
    margin-right:0px;
    box-sizing: border-box;
    font-weight:300;
    outline:none;
}
input[type="checkbox"]:focus,input[type="radio"]:focus{
    outline:none;
}
input[type="checkbox"]:after, input[type="radio"]:after{
    font-size:inherit;
    cursor:pointer;
    padding:3px 5px;
    margin-right:0px !important;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    border:1px solid #ccc;
    border-right:0px;
    line-height:1;
    box-sizing: border-box;
    font-weight:300;
}
input[type="checkbox"]:after{
    content:"\2610";
}
input[type="checkbox"]:checked:after{
    content:"\2611";
}
input[type="radio"]:after{
    content:"\25CE";
}
input[type="radio"]:checked:after{
    content:"\25C9";
}
input[type="checkbox"] + label[for],input[type="radio"] + label[for]{
    cursor:pointer;
    padding:3px 5px;
    margin: 3px 0px 0px 0px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    border:1px solid #ccc;
    border-left:0px;
    margin-left:0px !important;
    line-height:1;
    font-size:2rem;
    box-sizing: border-box;
    font-weight:300;
}
::placeholder{
    color:rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<form>
    <select><option>1</option><option>2</option></select>
    <input type="text" placeholder="text" />
    <input type="checkbox" id="c" /><label for="c">Check me</label>
    <input type="radio" name="r" value="1" id="r1" /><label for="r1">option 1</label>
    <input type="radio" name="r" value="2" id="r2" /><label for="r2">option 2</label>
</form>
</body>
</html>

如何用unicode字符替换单选按钮？

3 个答案: