純css改變radio樣式
阿新 • • 發佈：2019-02-04
具體的就是用上css3中的內容，和position，具體的可以參考一下程式碼，
詳情可以參考：http://codepen.io/jcpplus/pen/ukvps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
.smart-form :after, .smart-form :before {
margin: 0;
padding: 0;
//@include box-sizing(content-box);
}
.smart-form .radio,
{
position: relative;
display: block;
font-weight: 400;
}
.smart-form .radio {
margin-bottom: 4px;
padding-left: 25px;
line-height: 25px;
color: #0c4757;
cursor: pointer;
font-size: 13px;
}
/*add*/
.smart-form .radio input {
position: absolute;
left: -9999px;
}
.smart-form .radio i {
position: absolute;
top: 6px;
left: 0;
display: block;
width: 15px;
height: 15px;
outline: 0;
border-width: 1px;
border-style: solid;
background: #9cd9e8;
}
.smart-form .radio i {
border-radius: 50%;
}
.smart-form .radio i,
{
border-color: #47A8C0;
transition: border-color .3s;
-webkit-transition: border-color .3s;
}
.smart-form .radio input:checked+i, {
border-color: #47A8C0;
}
.smart-form .radio input+i:after {
position: absolute;
opacity: 0;
transition: opacity .1s;
-webkit-transition: opacity .1s;
}
.smart-form .radio input+i:after {
content: '';
top: 3px;
left: 3px;
width: 9px;
height: 9px;
border-radius: 50%;
}
.smart-form .radio input+i:after {
background-color: #47A8C0;
}
.smart-form .radio input:checked+i:after {
opacity: 1;
}
</style>
</head>
<body>
<form action="" class="smart-form">
<fieldset>
<section>
<label class="label">Columned radios</label>
<div class="row">
<div class="col col-4">
<label class="radio">
<input type="radio" name="radio" checked="checked">
<i></i>Alexandra</label>
<label class="radio">
<input type="radio" name="radio">
<i></i>Alice</label>
<label class="radio">
<input type="radio" name="radio">
<i></i>Anastasia</label>
<input type="radio" name="radio">
<i></i>Anastasia
</div>
</div>
</section>
</fieldset>
</form>
</body>
</html>