OK, vì vậy trong các trình duyệt HTML5 bạn có thể có:CSS nào được trình duyệt sử dụng để tạo kiểu cho <input type = "email"> s không hợp lệ?
<input class="txt-box" type="email" name="email" rel="required" />
Khi email không phải là ở dạng thích hợp nó đặt một hộp màu đỏ xung quanh nó.
Câu hỏi của tôi là: CSS xác định kiểu đó là gì?
Phụ thuộc vào trình duyệt. Điều này sẽ bao gồm các căn cứ của bạn:
input:invalid, input:-moz-ui-invalid {
border:0;
outline:none;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
Kiểm tra ra hiệu ứng trong một trình duyệt tương thích:
input[type="email"] {
border:0;
outline:none;
box-shadow:none;
}
IE7 tuân thủ sẽ yêu cầu:
input.txt-box {
border:0 !important;
outline:none !important;
box-shadow:none;
}
sẽ tạo kiểu trạng thái mặc định của nó ... không phải trạng thái không hợp lệ của nó. –
Đúng, mặc dù tôi không biết bạn có thể chọn các trường biểu mẫu như thế tôi sẽ bỏ phiếu cho bạn một trường cho điều đó. Vẫn cần phải tìm ra trạng thái không hợp lệ. –
vâng, điều đó không làm gì cả. firbug cho thấy phong cách tôi thêm vào, nhưng phác thảo màu đỏ vẫn còn đó. –
Nếu bạn cài đặt phần mở rộng Firebug trong Firefox và sử dụng nó để kiểm tra trường biểu mẫu được đề cập, bạn sẽ có thể thấy CSS mà Firefox sử dụng nội bộ để tạo kiểu cho nó. (. Hãy chắc chắn rằng “Show User Agent CSS” được chọn trong menu pop-up tab Kiểu của)
Trong Firefox 5 trên máy Mac của tôi, nó sử dụng CSS sau đây:
:-moz-ui-invalid:not(output) {
box-shadow: 0 0 1.5px 1px red;
}
Thú họ sử dụng box-shadow. Có một câu hỏi về Stack Overflow tôi thấy gần đây đã đề cập đến bộ chọn :-moz-ui-invalid: xem Style HTML5 input types if validation fails.
Cảm ơn @Paul, không chắc chắn cách đặt câu hỏi. –
đây là URL: http: //jasonspickdesign.com/contact.php –
bạn rất hoan nghênh, không chắc chắn liệu tôi có làm rõ hơn hay không, đó là một trong những điều khó hiểu đó. –