学习笔记（7） CSS表单设计

今天药忘吃喽~ 2023-05-21 08:56 15阅读 0赞

知识点

*  改变文本框和文本域样式
 *  用图片美化按钮
 *  用label标签提升用户体验

**一、改变文本框和文本域样式**

改变边框精细，颜色，添加背景色、背景图像等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]

.text1 { 
    				border: 1px solid #f60;
    				color: #03C;
    			}
    
    			.text2 { 
    				border: 2px solid #390;
    				width: 200px;
    				height: 24px;
    				font-size: 16px;
    				font-weight: bold;
    				line-height: 1.6;
    			}
    
    			.text3 { 
    				border: 2px solid #C3C;
    				height: 20px;
    				background: #ffeeff url(./images/map.png) right 3px no-repeat;
    			}
    
    			.text4 { 
    				border: 2px solid #F60;
    				width: 150px;
    				height: 29px;
    				font-size: 16px;
    				line-height: 1.6;
    				background: url(./images/dw/yu.png) 0 0 no-repeat;
    			}

**文本：**  
第一行是文本框的默认样式；  
第二行为设置边框和字体颜色的样式；  
第三行为设置边框、宽度、高度、字体大小、行高的样式；  
第四行设置边框和增加背景色和背景图片；第五行为增加一个gif动画的背景图片。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]  
**textare 文本域：**

第一个为默认的文本域样式。

第二个为设置边框、宽度为百分比、高度和背景颜色。

overflow:auto定义当内容不超过现在文本域高度时不出现滚动条

代码：

.area { 
    border: 1px solid #F90;
    overflow: auto;
    background-color: palegoldenrod;
    width: 99%;
    height: 100px;
    }

**二、用图片美化按钮**

代码：

.btn08 { 
    				background: url(/upload/2010-08/28/submit_bg.gif) 0px -64px;
    				border: 1px solid #8b9c56;
    				height: 32px;
    				font-weight: bold;
    				padding-top: 2px;
    				cursor: pointer;
    				font-size: 14px;
    				color: #360;
    			}
    
    			.btn09 { 
    				/* background: url(http://www.aa25.cn/upload/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat; */
    				background-color: pink;
    				width: 107px;
    				height: 37px;
    				border: none;
    				font-size: 14px;
    				font-weight: bold;
    				color: #d84700;
    				cursor: pointer;
    			}

**三、用label标签提升用户体验**

label标签常常被大家忽略了，我们可以对表单的说明文字使用label标签，这样当用户点击文字时，光标就定位到表单上了。

标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。但是，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。  
当鼠标点击姓名文字时，光标就会定位到后边的文本框上了；点击男女文字也会选中相应的选项；同理，复选框和文本域也是一样的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20230521/ed7da698bb5349b08a0ce15d293e1793.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]: /images/20230521/0b6b8324a3444634886cd0b5679cba7a.png