您的位置：首页 > Web前端 > CSS

纯css改变radio样式

2015-07-18 19:53 716 查看
具体的就是用上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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航