使用 CSS 属性选择器设置表单样式

百变鹏仔 3个月前 (09-20) #CSS

文章标签表单

使用css中的属性选择器为具有特定属性的html元素应用样式。有以下规则适用于属性选择器。

p[lang] - 选择具有lang属性的所有段落元素。
p[lang="fr"] - 选择lang属性值完全为"fr"的所有段落元素。
p[lang~="fr"] - 选择lang属性值包含单词"fr"的所有段落元素。
p[lang|="en"] - 选择lang属性值完全为"en"或以"en-"开头的所有段落元素。
立即学习“前端免费学习笔记（深入）”；

以下是使用CSS属性选择器为表单添加样式的代码：

示例

演示

<!DOCTYPE html><html><head><style>body {   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;}input[type="text"] {   width: 300px;   display: block;   margin-bottom: 10px;   background-color: rgb(195, 250, 247);   font-size: 18px;   padding: 15px;   border: none;}input[type="submit"] {   padding: 10px;   font-size: 18px;   border: none;   outline: none;   background-color: rgb(75, 163, 16);   color: white;}input[type="password"] {   width: 300px;   padding: 10px;   background-color: red;   color: white;   border: none;}</style></head><body><h1>Css attribute selector example</h1><form><label for="fname">First name:</label><br /><input type="text" id="fname" name="fname" value="Ron" /><label for="lname">Last name:</label><br /><input type="text" id="lname" name="lname" value="Shaw" /><label for="pass">Password:</label><br /><input type="password" id="pass" name="pass" value="password" /><input type="submit" value="Submit" /></form></body></html>

输出

上述代码将产生以下输出 −

文章推荐

使用 CSS 属性选择器设置表单样式

示例

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写