Web标准：九、CSS表单设计

Web标准：九、CSS表单设计

知识点：

1.改变文本框和文本域样式
2.用图片美化按钮
3.改变下拉列表样式
4.用label标签提升用户体验

1）改变文本框和文本域样式


文本框标签：<input type="text" value="" class="">



给这些文本框增加css样式，改变他们的样式：





最终显示效果如下：





文本域标签：<textarea id="" class="" rows="5" cols="30">网站建设教程</textarea>
rows设置显示的行数，cols设置显示的宽度







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>
因为下拉列表对许多样式不生效，故而在页面中显示的很丑陋，而且在IE6下总在最上层，造成许多弹出层不能被他遮挡。
比如下拉列表CSS样式为

，

在IE9和IE6下的显示如下：
IE9下的显示：





IE6下的显示：





解决方案：可以把被遮挡的浮层使用iframe，因为下拉列表不会跑到iframe上面去。更高的要求可以用div模拟来代替下拉列表。

4）用label标签提升用户体验
label标签：<label>姓名：</label>
这里做的主要是标签定位，点击标签后光标定位问题。
标签定位用的是for，for属性规定label与哪个表单元素绑定。
格式为<label for="value">姓名：</label>，value为要绑定的元素的id
代码如下：





显示界面如下：





注意：如果想实现单选框互斥的作用，即radio的互斥，只要给他们加上同样的name=""值就可以了。