表单元素，大家应该很熟悉了？那就是网页上让你跟网站互动的东西，像是输入框，按钮之类的。可别只看它们好看不好看，功能多不多，关键是要让用户用着舒服才行。这时候，CSS这门魔法就能帮到大忙，它里面可是有个叫做enabled伪类选择器的妙招，能让表单元素变得更加好看好玩，使用起来也就更顺手。接下来就让我教大家如何运用这个enabled伪类选择器给现有的表单元素换个新衣服，还有几个实操案例。
基本样式渲染
首先，美化下表单图标跟网页搭配好看点。比如，调调输入框边框宽度、字号排版、底部颜色啥的呀。瞧这边，这个简单编码，学会就轻松搞定拉！
css
input,select,textarea{
border:1pxsolid#ccc;
font-size:14px;
padding:5px;
background-color:#fff;
color:#333;
}
这里咱们要让你们看看，所有的输入框，下拉菜单，多行文本框都超级美，特别整齐。瞧，它们边上的框框儿是同一个样子的，字号也都差不多大，间隔也都是一样的，连背后的底色也是一样哒！
input, select, textarea {
padding: 10px;
border: 1px solid #ccc;
}
select {
width: 200px;
}
textarea {
resize: vertical;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
使用:enabled伪类选择器
知道吗，通过”enabled”这个伪类，我们能快速分辨出哪些表单元素是可用的。然后，我们就可以给它们换个好看点的外衣了！想知道如何使用’enabled’伪类改变颜色吗？别急，继续往下读！
输入，选择和文本框都能用了！
input:enabled, select:enabled, textarea:enabled {
background-color: white;
color: black;
}
input:disabled, select:disabled, textarea:disabled {
background-color: #f9f9f9;
color: #aaa;
}
/*可用表单元素样式*/
上面那些代码搞定了所有按钮和菜单，看起来超炫酷！那我就来给你说说这些东西是咋设置的，让你看看是不是真的那么牛！
区分可用和不可用的表单元素
咱这表得稍微弄个好看点儿的设计，像给用到的地方画个圈什么的，然后给边框刷个绿漆，字号搞大些，客户看了肯定知道咋填！
input:enabled{
我们让它穿上绿色新衣，看起来更顺眼~只要把旧版的框色换成那个叫做”#4CAF50″的神奇代码就行！
font-size:16px;/*调大字体*/
input:enabled {
border-color: #4CAF50;
}
select:enabled {
outline: 2px solid #4CAF50;
font-size: 16px;
}
textarea:enabled {
border-color: #4CAF50;
font-family: Arial, sans-serif;
}
select:enabled{
边框的颜色是鲜绿的~就是#4CAF50那个代码。
textarea:enabled{
看我们以前那个对话是不是给那些填写内容用的框啊、下拉菜单啊还有大段文字的区域加了绿色边框并把字号弄大了呀？这样既美观又实用！以后再填表格时就不怕找不到可以点击的地方！
提升用户填写表单的效率和体验
你知不知道，只需要看看”enabled”这个选择器，就能立马改变表格元素的样式，操作简便快捷，用户理解起来方便还有助于避免误操作。不仅如此，表格整体颜值也是妥妥提升，更加吸引眼球。好看了用户满意度当然也会上升~这样子的话，我们的网站用户体验会越来越给力！
结语
这篇宝贝文章教你如何使用’status’伪类选择器来美化网页表格，让网站看着更亲民、更好使。这可是网页设计的利器快来试试看！希望对你有所帮助，祝你的网页更加炫酷！
评论0