Khớp một hộp đầu vào trống bằng CSS

Làm cách nào để áp dụng kiểu cho hộp nhập trống? Nếu người dùng nhập một cái gì đó trong trường đầu vào, kiểu sẽ không còn được áp dụng. Điều này có thể có trong CSS không? Tôi đã thử điều này:

input[value=""]

Nếu chỉ có lĩnh vực là requiredbạn có thể đi vớiinput:valid

#foo-thing:valid + .msg { visibility: visible!important; }      

 <input type="text" id="foo-thing" required="required">
 <span class="msg" style="visibility: hidden;">Yay not empty</span>

Xem trực tiếp trên jsFiddle

HOẶC phủ nhận bằng cách sử dụng #foo-thing:invalid(tín dụng cho @Samoody)

Trong các trình duyệt hiện đại, bạn có thể sử dụng :placeholder-shownđể nhắm mục tiêu đầu vào trống (không bị nhầm lẫn với ::placeholder).

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

Thêm thông tin và hỗ trợ trình duyệt: https://css-tricks.com/almanac/selector/p/placeholder-shown/

Không có bộ chọn trong CSS nào thực hiện điều này. Bộ chọn thuộc tính khớp với các giá trị thuộc tính, không tính giá trị.

Bạn sẽ phải sử dụng JavaScript.

Cập nhật giá trị của một trường không cập nhật thuộc tính giá trị của nó trong DOM vì vậy đó là lý do tại sao bộ chọn của bạn luôn khớp với một trường, ngay cả khi nó không thực sự trống.

Thay vào đó, hãy sử dụng lớp invalidgiả để đạt được những gì bạn muốn, như vậy:

input:required {
  border: 1px solid green;
}
input:required:invalid {
  border: 1px solid red;
}

<input required type="text" value="">

<input required type="text" value="Value">

input[value=""], input:not([value])

làm việc với:

<input type="text" />
<input type="text" value="" />

Nhưng kiểu sẽ không thay đổi ngay khi ai đó bắt đầu nhập (bạn cần JS cho điều đó).

Nếu hỗ trợ trình duyệt cũ là không cần thiết, bạn có thể sử dụng kết hợp required, validvà invalid.

Điểm hay của việc sử dụng này là các phần tử giả validvà invalidhoạt động tốt với các thuộc tính loại của các trường đầu vào. Ví dụ:

input:invalid, textarea:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

input:valid, textarea:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

<input type="email" name="email" placeholder="john_doe@example.com" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

Để tham khảo, JSFiddle tại đây: http://jsfiddle.net/0sf6m46j/

$('input#edit-keys-1').blur(function(){
    tmpval = $(this).val();
    if(tmpval == '') {
        $(this).addClass('empty');
        $(this).removeClass('not-empty');
    } else {
        $(this).addClass('not-empty');
        $(this).removeClass('empty');
    }
});

trong jQuery. Tôi đã thêm một lớp và tạo kiểu với css.

.empty { background:none; }

Điều này làm việc cho tôi:

Đối với HTML, thêm requiredthuộc tính vào thành phần đầu vào

<input class="my-input-element" type="text" placeholder="" required />

Đối với CSS, sử dụng :invalidbộ chọn để nhắm mục tiêu đầu vào trống

input.my-input-element:invalid {

}

Ghi chú:

• Giới thiệu requiredtừ w3Schools.com : "Khi có mặt, nó chỉ định rằng một trường đầu vào phải được điền trước khi gửi biểu mẫu."

Câu hỏi này có thể đã được hỏi cách đây một thời gian, nhưng gần đây tôi đã tìm đến chủ đề này để tìm kiếm xác nhận mẫu phía khách hàng và vì sự :placeholder-shown hỗ trợ đang trở nên tốt hơn, tôi nghĩ những điều sau đây có thể giúp đỡ người khác.

Sử dụng ý tưởng Berend về việc sử dụng lớp giả CSS4 này, tôi có thể tạo xác thực mẫu chỉ được kích hoạt sau khi người dùng hoàn tất điền nó.

Dưới đây là ademo và giải thích về CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

Nếu bạn không hài lòng khi không hỗ trợ IE hoặc tiền Chromium Edge (có thể sẽ ổn nếu bạn đang sử dụng tính năng này để cải tiến lũy tiến), bạn có thể sử dụng :placeholder-shownnhư Berend đã nói. Lưu ý rằng đối với Chrome và Safari, bạn thực sự cần một trình giữ chỗ không trống để làm việc này, mặc dù một không gian hoạt động.

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}

<fieldset>
  <legend>
    Floating labels example (no-JS)
  </legend>
  <label class="floating-label">
    <input type="text" placeholder=" ">
    <span>Username</span>
  </label>
  <label class="floating-label">
    <input type="Password" placeholder=" ">
    <span>Password</span>
  </label>
</fieldset>
<p>
  Inspired by Bootstrap's <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating labels</a>.
</p>

Tôi đã thêm một tên lớp vào đầu vào và sau đó áp dụng các quy tắc CSS cho nó:

<input type="text" name="product" class="product" />

<style>
input[value=""].product {
    display: none;
}
</style>

Tôi tự hỏi bởi câu trả lời chúng tôi có thuộc tính rõ ràng để có được hộp đầu vào trống, hãy xem mã này

/*empty input*/
input:empty{
    border-color: red;
}
/*input with value*/
input:not(:empty){
    border-color: black;
}

CẬP NHẬT

input, select, textarea {
    border-color: @green;
    &:empty {
        border-color: @red;
    }
}

Hơn nữa để có một cái nhìn tuyệt vời trong xác nhận

 input, select, textarea {
    &[aria-invalid="true"] {
        border-color: amber !important;
    }

    &[aria-invalid="false"], &.valid {
        border-color: green !important;
    }
}

Tôi nhận ra đây là một chủ đề rất cũ, nhưng mọi thứ đã thay đổi một chút kể từ đó và nó đã giúp tôi tìm ra sự kết hợp đúng đắn của những thứ tôi cần để khắc phục vấn đề của mình. Vì vậy, tôi nghĩ rằng tôi muốn chia sẻ những gì tôi đã làm.

Vấn đề là tôi đã phải xử lý cùng một css được áp dụng cho một đầu vào tùy chọn nếu nó được điền, như tôi đã có cho một yêu cầu điền. Css đã sử dụng lớp psuedo: hợp lệ, áp dụng css trên đầu vào tùy chọn khi không được điền.

Đây là cách tôi sửa nó;

HTML

<input type="text" required="required">
<input type="text" placeholder="">

CSS

input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}