Question

我需要样式必填字段，但只有当用户点击第一次，然后它没有点击时我才需要显示样式，我想保留默认颜色。

点击第一个表格的效果，但是用第2表格的css，方框3的结果： http://jsfiddle.net/rflfn/m0f6xuxd/

注意：红色框阴影是HTML5所需标记的浏览器的默认颜色（我没有使用任何脚本）。

<div class="test1">box 1<br>Appear box-shadow only on click
    <br>(default browser color)
    <br>show on 3 input at same time (all required fields).
    <form action="#">
        <input type="text">
        <input type="text" required>
        <input type="text" required>
        <input type="text">
        <input type="text" required>
        <input type="text">
        <input type="text">
        <input type="submit" text="Send">
    </form>
</div>

<div class="test2">box 2<br>Have CSS, but I need show color only when click (use standard formatting until it is clicked)
    <form action="#">
        <input type="text">
        <input type="text" required>
        <input type="text" required>
        <input type="text">
        <input type="text" required>
        <input type="text">
        <input type="text">
        <input type="submit" text="Send">
    </form>
</div>

<div class="test3">box 3<br>I need style all required fields with my own css (show on 3 input at same time, not only on focus input)
    <form action="#">
        <input type="text">
        <input type="text" required>
        <input type="text" required>
        <input type="text">
        <input type="text" required>
        <input type="text">
        <input type="text">
        <input type="submit" text="Send">
    </form>
</div>

.test1, .test2, .test3 {
    width: 230px;
    padding: 5px;
    margin: 5px;
    border: 1px solid red;
    display: inline-block;
    vertical-align: top;
}
form {
    margin: 20px;
}
form * {
    display: block;
    clear: both;
    margin: 10px;
}
.test2 :required {
    border: 1px solid #FFF;
    border-radius: 3px;
}
.test2 :required:valid {
    background-color: #E8FFED;
    box-shadow: 0 0 3px 1px #00EA33;
}
.test2 :required:invalid {
    background-color: #FFEEEE;
    box-shadow: 0 0 3px 1px #EA2034;
}

.test3 input[type="text"] {
    border: 1px solid #D1D1D1;
    border-radius: 3px;
}

.test3 :required {
    box-shadow: none;
}

.test3 :required:focus {
    border: 1px solid #FFF;
    background-color: #FFEEEE;
    box-shadow: 0 0 3px 1px #EA2034;
}

.test3 :required:valid {
    background-color: #E8FFED;
    box-shadow: 0 0 3px 1px #00EA33;
}

Answer 1

编辑：不需要课程。

您可以使用通用兄弟组合器。唯一的问题是它不适用于您单击的元素之上的元素。为了更进一步，你需要Javascript。

jsfiddle

关键部分：

input:required:focus~input:required, input:required:focus {
    border: 1px solid #FFF;
    background-color: #FFEEEE;
    box-shadow: 0 0 3px 1px #EA2034;
}

如何设置必填字段的样式（仅在单击时）

1 个答案: