如何用CSS修改不同input标签的样式

如何用CSS修改不同input标签的样式

表单里的input标签长得千篇一律，但实际需求里往往会要求它们“各有各的样儿”。比如说搜索框、按钮、复选框——如果用统一的选择器去改，一不小心就全变了。那么怎么才能精准定位到具体类型的input呢？下面用一个简单的例子一步步拆解。

首先，新建一个HTML文件，把基础结构搭好。

接着新建一个CSS文件，用link标签把它和HTML页面关联起来。这一步是常规操作，但别漏掉，否则后面写的样式都不会生效。

这里创建三种不同类型的input作为演示对象。随便选几个常用的类型就好，比如文本输入框、密码框、提交按钮。

给每个input设置一个value属性值。这样在页面上显示出来的时候，一眼就能看出哪个是哪种类型，方便后续对比样式。

接下来就是重头戏了——用CSS的属性选择器来精确修改样式。核心格式是input[type=""]{}，中括号里填上你想定位的那个type的值。举个例子，如果你想只改文本输入框，就写成input[type="text"]；想改提交按钮，就写成input[type="submit"]。这个写法能让你跳过那些不需要改的input，直接命中目标。

中括号里面不仅限于type属性，其实任何其他属性值都能拿来用。比如你想根据name、class、id或者自定义属性去定位，通通都可以。只要属性名和属性值能匹配上，CSS就能精准锁定元素。

这样一来，不管是改边框颜色、背景图还是字体大小，都能做到“指哪打哪”。下次遇到input样式不听话的时候，记得试试属性选择器这个利器。