求解

youranersheng CSS3 实现下拉选择框、单选... 最后由 周文家 于2018年01月01日回复

  • 1 回答
  • 985 浏览

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<style type="text/css">

.radio-1{

width: 980px;

margin: 0 auto;

padding:3% 0;

background-color: #3cc;

text-align: center;

}

.radio-1 [type= "radio"]{

display: non e; 

.radio-1 label{

display: inline-block;

position: relative;

width: 28px;

height: 28px;

border: 1px #ccc solid;

background-color: #fff;

margin-right: 10px;

cursor: pointer;

border-radius: 100%;

}

.radio-1 label:after{

content: '';

position: absolute;

top: 4px;

left: 4px;

width: 20px;

height: 20px;

background-color: #666;

border-radius: 50%;

transform: scale(0);

transition:transform .2s ease-out; 

}

.radio-1 [type="radio" ]: checked  + label{

background-color: #eee;

transition:background-color .2s ease-in; 

}

.radio-1 [type="radio"]: checked  + label{

transform: scale(1);

transition:transform .2s ease-in; 

</style>

<body>

<div class="radio-1">

<input type="radio" name="radio-1" id="radio-1-1" />

<label for="radio-1-1"></label>

<input type="radio" name="radio-1" id="radio-1-2" />

<label for="radio-1-2"></label>

<input type="radio" name="radio-1" id="radio-1-3" />

<label for="radio-1-3"></label>

</div>

</body>

</html>

  • 周文家 2018年01月01日 回答 #1楼
  • 同学你只是贴了一大段代码出来,请描述下你想问的问题。

  • 0 评论