:default
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
:default là lớp giả trong CSS dùng để chọn các phần tử biểu mẫu là mặc định trong một nhóm các phần tử liên quan.
Try it
label,
input[type="submit"] {
display: block;
margin-top: 1em;
}
input:default {
border: none;
outline: 2px solid deeppink;
}
<form>
<p>How did you find out about us?</p>
<label
><input name="origin" type="radio" value="google" checked /> Google</label
>
<label><input name="origin" type="radio" value="facebook" /> Facebook</label>
<p>Please agree to our terms:</p>
<label
><input name="newsletter" type="checkbox" checked /> I want to subscribe to
a personalized newsletter.</label
>
<label
><input name="privacy" type="checkbox" /> I have read and I agree to the
Privacy Policy.</label
>
<input type="submit" value="Submit form" />
</form>
Bộ chọn này khớp với những gì được định nghĩa trong HTML Standard §4.16.3 Pseudo-classes — nó có thể khớp với các phần tử <button>, <input type="checkbox">, <input type="radio">, và <option>:
- Phần tử option mặc định là phần tử đầu tiên có thuộc tính
selected, hoặc là option được bật đầu tiên theo thứ tự DOM. Các thẻ<select>có thuộc tínhmultiplecó thể có nhiều hơn một optionselected, và tất cả chúng đều sẽ khớp với:default. <input type="checkbox">và<input type="radio">khớp nếu chúng có thuộc tínhchecked.<button>khớp nếu nó là nút gửi mặc định của một<form>: tức là thẻ<button>đầu tiên theo thứ tự DOM thuộc về biểu mẫu đó. Điều này cũng áp dụng cho các loại<input>dùng để gửi biểu mẫu, nhưimagehoặcsubmit.
Cú pháp
css
:default {
/* ... */
}
Ví dụ
HTML
html
<fieldset>
<legend>Favorite season</legend>
<input type="radio" name="season" id="spring" value="spring" />
<label for="spring">Spring</label>
<input type="radio" name="season" id="summer" value="summer" checked />
<label for="summer">Summer</label>
<input type="radio" name="season" id="fall" value="fall" />
<label for="fall">Fall</label>
<input type="radio" name="season" id="winter" value="winter" />
<label for="winter">Winter</label>
</fieldset>
CSS
css
input:default {
box-shadow: 0 0 2px 1px coral;
}
input:default + label {
color: coral;
}
Kết quả
Đặc tả
| Specification |
|---|
| HTML # selector-default |
| Selectors Level 4 # default-pseudo |
Tương thích trình duyệt
Xem thêm
- Web forms — Working with user data
- Styling web forms
- Các phần tử HTML liên quan:
<button>,<input type="checkbox">,<input type="radio">, và<option>