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=""值就可以了。