前端CSS-表单控件的选择器和伪类| “朝闻道”知识分享大赛

[2201_75824342]

这是我参加朝闻道知识分享大赛的第34篇文章。

---

在使用 CSS 定义表单样式时，选择器和伪类能帮助我们精确地选择表单控件的特定状态，创建出丰富的交互效果。

 

1. 表单控件的基础选择器

HTML 表单控件的选择器基于 <input>、<textarea>、<select> 和 <button> 等标签，可以通过 type 属性来进一步选择特定类型的输入框。

基本选择器示例

input {
    /* 针对所有 input 元素的样式 */
}
​
input[type="text"] {
    /* 针对文本框的样式 */
}
​
input[type="password"] {
    /* 针对密码框的样式 */
}
​
input[type="email"] {
    /* 针对邮箱输入框的样式 */
}
​
input[type="radio"] {
    /* 针对单选按钮的样式 */
}
​
input[type="checkbox"] {
    /* 针对复选框的样式 */
}
​
textarea {
    /* 针对 textarea 的样式 */
}
​
select {
    /* 针对下拉菜单的样式 */
}
​
button {
    /* 针对按钮的样式 */
}

 

2. 表单伪类选择器

伪类选择器帮助我们选择表单控件的特定状态，比如聚焦、禁用、必填等状态，增强交互体验。

2.1 :focus

:focus 选择器用于选择当前获得焦点的表单控件。常用于设置聚焦状态的边框颜色或阴影。

input[type="text"]:focus,
textarea:focus,
select:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
    outline: none;
}

2.2 :hover

:hover 选择器用于选择鼠标悬停在上方的表单控件，增强交互提示效果。

button:hover,
input[type="submit"]:hover {
    background-color: #45a049;
}

2.3 :disabled

:disabled 选择器用于选择禁用状态的表单控件。通常禁用控件的颜色会更浅，以提示用户该控件不可操作。

input:disabled,
button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    color: #666;
}

2.4 :required

:required 选择器用于选择必填项的表单控件，常用于提醒用户哪些控件是必填项。

input:required {
    border-left: 3px solid #FF5722;
}

2.5 :checked

:checked 选择器用于选择已选中的单选按钮或复选框，通常用于自定义复选框和单选按钮的选中效果。

input[type="checkbox"]:checked + label::before {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

2.6 :valid 和 :invalid

:valid 和 :invalid 选择器用于选择输入有效或无效值的控件，帮助实现实时的表单验证效果。

input[type="email"]:valid {
    border-color: #4CAF50;
}
​
input[type="email"]:invalid {
    border-color: #FF5722;
}

2.7 :placeholder-shown

:placeholder-shown 选择器用于选择显示占位符的输入框，常用于控制占位符的颜色。

input:placeholder-shown {
    color: #999;
    font-style: italic;
}

 

3. 表单控件伪元素

伪元素可以为表单控件添加额外的装饰或说明，常用的伪元素有 ::placeholder 和 ::before、::after 等。

3.1 ::placeholder

::placeholder 伪元素用于设置输入框占位符的样式，如颜色、字体样式等。

input::placeholder,
textarea::placeholder {
    color: #999;
    font-style: italic;
}

3.2 ::before 和 ::after

在表单标签上使用 ::before 和 ::after 伪元素来显示自定义图标或说明。

input[type="text"]::before {
    content: "🔍";
    position: absolute;
    margin-right: 5px;
}

 

4. 使用属性选择器选择表单控件

属性选择器可以基于控件的属性值进行选择，增强选择的灵活性，适用于不同类型或条件的表单控件。

4.1基于 name 属性的选择

input[name="username"] {
    /* 针对 name="username" 的输入框 */
    border-color: #4CAF50;
}

4.2基于 placeholder 属性的选择

input[placeholder="请输入用户名"] {
    /* 针对特定 placeholder 的输入框 */
    border-bottom: 2px solid #4CAF50;
}

4.3基于 type 属性的选择

input[type="text"],
input[type="email"],
input[type="password"] {
    /* 针对多种类型的输入框 */
    padding: 10px;
    border: 1px solid #ccc;
}