Làm cách nào để nhắm mục tiêu văn bản loại đầu vào bằng CSS?

Người dùng có thể tương tác với trạng thái này bằng cách kiểm tra/chọn một phần tử hoặc hủy tương tác bằng cách bỏ chọn/bỏ chọn phần tử đó

Ghi chú. Bởi vì các trình duyệt thường coi các <option> là các phần tử được thay thế, nên mức độ mà chúng có thể được tạo kiểu với lớp giả :checked thay đổi tùy theo trình duyệt

:checked

HTML

<div>
  <input type="radio" name="my-input" id="yes" value="yes" />
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no" value="no" />
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in" />
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

CSS

div,
select {
  margin: 8px;
}

/* Labels for checked inputs */
input:checked + label {
  color: red;
}

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

Kết quả

Ví dụ này sử dụng lớp giả :checked để cho phép người dùng chuyển đổi nội dung dựa trên trạng thái của hộp kiểm mà không cần sử dụng JavaScript

Làm cách nào để chọn đầu vào với loại văn bản trong CSS?

Làm cách nào để chọn id đầu vào trong CSS?

Làm cách nào để tạo kiểu CSS cho tệp đầu vào?

Làm cách nào để chọn thuộc tính dữ liệu trong CSS?