我通常不会像这样编辑单选按钮。但我需要实现这种外观:http://i.imgur.com/KbJMWfn.png现在它看起来像这样:http://i.imgur.com/OFqifxk.png .该站点位于:getnoble.bdanzer.com,当您单击请求邀请时会出现表格。对于我应该去哪里,我只是有点迷失了任何想法或想法?
最佳答案
这应该对你有魔力
HTML
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Android</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">iPhone</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
CSS
ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #111111;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.1s linear;
}
ul li:hover label{
color: #FFFFFF;
}
ul li .check{
display: block;
position: absolute;
border: 1px solid white;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .1 linear;
-webkit-transition: border .1 linear;
}
ul li:hover .check {
border: 1px solid #FFFFFF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background .1s linear;
-webkit-transition: background .1s linear;
}
input[type=radio]:checked ~ .check {
border: 2px solid blue;
}
input[type=radio]:checked ~ .check::before{
background: blue;
}
input[type=radio]:checked ~ label{
color: white;
}
关于html - 如何编辑联系表 7 的单选按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42101961/