自定義input radio樣式
阿新 • • 發佈:2018-11-16
input[type="radio"]+span::before{ content: "\a0";//不換行空格 display: inline-block; vertical-align: middle; width: 30px; height: 30px; font-size: 24px; margin-right: 16px; border-radius: 50%; border: 1px solid #5b9bd4; text-indent:.15em; line-height: 1; } input[type="radio"]:checked+span::before{ background: #5b9db4; background-clip: content-box; padding: .2em; } input[type="radio"]{ position: absolute; clip: rect(0,0,0,0); }
參考:https://www.cnblogs.com/xinjie-just/p/5911086.html
樣式二:
<input type="radio" name="myRadio" class="radio" /><span>是</span>
<input type="radio" name="myRadio" class="radio" /><span>否</span>
/*public for radio*/ input[type="radio"] + span::before { content: "\a0"; /*不換行空格*/ display: inline-block; vertical-align: middle; font-size: 18px; width: 0.6em; height: 0.6em; margin-right: .4em; border-radius: 50%; border: 1px solid #ffb251; text-indent: .15em; line-height: 1; padding: .2em; } input[type="radio"]:checked + span::before { background-color: #ffb251; background-clip: content-box; padding: .2em; } input[type="radio"] { position: absolute; opacity: 0; z-index: 3; width: 30px; height: 30px; }