发表于： 2016-07-06 00:20:46
1 2194
- 奎哥放心。等我补完表单的任务就给你看。
- 今天完成的事情：继续温习css页面。补上表单任务。开始用有道记笔记，代码加注释。养成好习惯。
明天计划的事情：继续继续。
遇到的问题：input,select转换样式。
收获：
input：
HTML：
<div class="">
<label class="">
<input type="radio" name="type" class="hidden">
<span></span>
<p>对口箱</p>
</label>
</div>
CSS:
.inputbox input[type=radio] + span {
box-sizing: border-box;
display: inline-block;
width: 1.4rem;
height: 1.4rem;
margin: 0 1rem;
border: solid 1px black;
border-radius: .7rem;
}
.inputbox input[type=radio]:checked + span {
box-sizing: border-box;
display: inline-block;
width: 1.6rem;
height: 1.6rem;
margin: 0 1rem;
border: solid .6rem #1277dc;
border-radius: .8rem;
}
.inputbox .hidden {
opacity: 0;
position: absolute;
}
隐藏原本样式。写空span，在链接。在span中写所需要的样式。
select：
.main select {
.main select {
padding: 10px 35px 10px 20px;
font-size: 14px;
color: rgb(153, 153, 153);
border: solid 1px rgb(232, 232, 232);
将默认的select选择框样式清除
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
在选择框的最右侧中间显示小箭头图片
background: url(images/arrow.png) 90% center no-repeat;
清除ie的默认选择框样式清除，隐藏下拉箭头
返回列表
评论