Web标准：九、CSS表单设计
浏览数：184 /
时间：2015年06月09日
Web标准：九、CSS表单设计
知识点：
1.改变文本框和文本域样式
2.用图片美化按钮
3.改变下拉列表样式
4.用label标签提升用户体验
1）改变文本框和文本域样式
文本框标签：<input type="text" value="" class="">
给这些文本框增加css样式，改变他们的样式：
.png)
最终显示效果如下：
.png)
文本域标签：<textarea id="" class="" rows="5" cols="30">网站建设教程</textarea>
rows设置显示的行数，cols设置显示的宽度
.png)
.png)
overflow:auto;是定义当内容不超过现在文本域高度时不出现滚动条。
resize:none;去掉文本域右下角的小三角，使它不能直接拉动。
outline: none;去掉选中文本域时边框变成黄色的效果。
2）用图片美化按钮
按钮标签：<input class="b1" type="button" value="提交">
用图片美化按钮，可以直接平铺一个图片，但是图片不要加边框，这样就可以自适应宽度。
3）改变下拉列表样式
下拉列表：
<select name="select" id="select" class="select">
<option>请选择---------</option>
<option>标准之路</option>
</select>
<option>请选择---------</option>
<option>标准之路</option>
</select>
因为下拉列表对许多样式不生效，故而在页面中显示的很丑陋，而且在IE6下总在最上层，造成许多弹出层不能被他遮挡。
比如下拉列表CSS样式为.png)
，
在IE9和IE6下的显示如下：
，在IE9和IE6下的显示如下：IE9下的显示：
.png)
IE6下的显示：
.png)
解决方案：可以把被遮挡的浮层使用iframe，因为下拉列表不会跑到iframe上面去。更高的要求可以用div模拟来代替下拉列表。
4）用label标签提升用户体验
label标签：<label>姓名：</label>
这里做的主要是标签定位，点击标签后光标定位问题。
标签定位用的是for，for属性规定label与哪个表单元素绑定。
格式为<label for="value">姓名：</label>，value为要绑定的元素的id
代码如下：
.png)
显示界面如下：
.png)
注意：如果想实现单选框互斥的作用，即radio的互斥，只要给他们加上同样的name=""值就可以了。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
