css3写单选框，复选框

废话不多说直接看图:复选框的选中喝未选中的，哈哈哈，截图截的不够好，请谅解。

直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
<style>
    input[type=checkbox]{
        /*同样，首先去除浏览器默认样式*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /*编辑我们自己的样式*/
        position: relative;
        width: 20px;
        height: 20px;
        background: transparent;
        border:1px solid #00BFFF;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        outline: none;
        cursor: pointer;
    }
    input[type=checkbox]:after{
        content: '\2714';
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background: #00BFFF;
        color: #fff;
        text-align: center;
        line-height: 18px;
        /*增加动画*/
        -webkit-transition: all ease-in-out 300ms;
        -moz-transition: all ease-in-out 300ms;
        transition: all ease-in-out 300ms;
        /*利用border-radius和opacity达到填充的假象，首先隐藏此元素*/
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        opacity: 0;
    }
    input[type=checkbox]:checked:after{
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        opacity: 1;
    }
    </style>
    </head>
    <body>
        <input type="checkbox" />
    </body>
</html>

下面直接看单选框的按钮样式：

选中和未选中的状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			form{
				position:relative;
			}
			 input[type=radio]{
		        /*去除浏览器默认样式*/
		        -webkit-appearance: none;
		        -moz-appearance: none;
		        appearance: none;
		        /*自定义样式*/
		        position: relative;
		        display: inline-block;
		        vertical-align: top;
		        width: 20px;
		        height: 20px;
		        border: 1px solid #00bfff;
		        outline: none;
		        cursor: pointer;
		        /*设置为圆形，看起来是个单选框*/
		        -webkit-border-radius: 20px;
		        -moz-border-radius: 20px;
		        border-radius: 20px;
		    }
 
		    /**
		    * 单选框 选中之后的样式
		    **/
		    input[type=radio]:after{
		        content: '';
		        position: absolute;
		        width: 12px;
		        height: 12px;
		        display: block;
		        left: 0;
		        top: 0;
		        right: 0;
		        bottom: 0;
		        margin: auto;
		        background: #00bfff;
		        -webkit-border-radius: 12px;
		        -moz-border-radius: 12px;
		        border-radius: 12px;
		        -webkit-transform: scale(0);
		        -moz-transform: scale(0);
		        transform: scale(0);
		        /*增加一些动画*/
		        -webkit-transition : all ease-in-out 300ms;
		        -moz-transition : all ease-in-out 300ms;
		        transition : all ease-in-out 300ms;
		    }
		    input[type=radio]:checked:after{
		        -webkit-transform: scale(1);
		        -moz-transform: scale(1);
		        transform: scale(1);
		    }
		</style>
	</head>
	<body>
		<form>
			<label>
				<input id="item1" type="radio" name="item" value="选项一" checked>
				选项一
			</label>
			<label>
				<input id="item2" type="radio" name="item" value="选项二" >
				选项二
			</label>
		</form>
	</body>
</html>

　　好了，继续去找我的项目的bug了。

posted @ 2018-07-03 16:53  zy1314  阅读(305)  评论(0)  编辑  收藏  举报