[一分钟学习]文本框美化
首先在网页中插入一个文本框
<input type="text" name="title" />
预览的时候,你会发现,默认的样式好难看,这个时候我们需要对该文本框进行美化,首先,在代码中间加入一个title的样式名称。
<input class="title" type="text" name="title" />
然后在css里加入代码,首先我们想要一个橙色的一个像素的实线边框
.title{ border:1px solid #ff6600;}
橙色边框出来后,我们需要定义他的宽度和高度
.title{ border:1px solid #ff6600;width:200px; height:50px;}
在预览的时候发现当你鼠标移到文本框内的时候,光标是在左上角,我们通过代码让其进行垂直居中。
.title{ border:1px solid #ff6600;width:200px; height:50px;line-height:50px;}
然后在对文本框里面的文字设置一个颜色。
.title{ border:1px solid #ff6600;width:200px; height:50px;line-height:50px;color:#333}
预览的时候发现,好像输入文字的时候有点太靠边了,那么再给一个padding-left的值
.title{ border:1px solid #ff6600;width:190px; height:50px;line-height:50px;color:#333; padding-left:10px;}
然后在对文字定型一个定义
.title{ border:1px solid #ff6600;width:190px; height:50px;line-height:50px;color:#333; padding-left:10px;font-size:14px;}
这样预览一下,是比以前好看多了,当然你也可以根据自己的需要继续进行修改和完善。