Hướng dẫn radio html checked

Question

Nội dung chính Show

1. Tạo HTML
2. Tạo css
3. Kết luận.
Thuộc tính checked

Đã đăng vào thg 10 21, 2019 12:36 SA 2 phút đọc

Một ngày buồn và cạn hết nguồn ý tưởng ko biết viết gì để chia sẻ kiến thức với các bạn . Thôi nay mình chia sẻ tips đơn giản hướng dẫn các bạn style checkbox, radio button không giống như mặc định ban đầu của checkbox và radio button chỉ với css
Để giúp cho các bạn tự làm được tôi sẽ hướng dẫn với radio button còn các bạn có thể tự làm với checkbox thông qua bài làm của tôi

1. Tạo HTML

Chúng ta tạo các input với radio theo sau là label sao cho id của input bằng for của label như đoạn code bên dưới đây

<div class="radio">
    <input type="radio" id="radio1" name="group-radio" />
    <label for="radio1">I love</label>
  </div>

2. Tạo css

Đầu tiên chúng ta nên ẩn input đi và mọi style chúng ta làm trong label bằng đoạn code dưới đây.

input[type="radio"] { {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
  }

đoạn này bạn cũng có thể thay bằng đoạn code sau:

input[type="radio"] { {
    display: none;
  }

Tiếp theo ta style cho label

label {
    padding-left: 35px; // Khoảng cách này để mình chứa style cho ô radio
    position: relative;
    margin: 0;
    line-height: 20px;
 }

Bây giờ chúng ta style cho cái nút radio
- Tạo vòng tròn bao ngoài nút radio. Chúng ta cho label bằng relative và tạo ra nút vòng bao ngoài radio với :before

label:before {
	 width: 20px;
	 height: 20px;
	 border-radius: 50%;
	 position: absolute;
	 top: 50%;
	 tranform: translateY(-50%);
	 left: 0;
	 content: '';
	 background: #fff;
	 border: 1px solid black;
}

Tạo nút bên trong radio khi input: checked. Bằng cách sau:

input[type="radio"]:checked ~ label:after {
	 width: 12px;
	 height: 12px;
	 border-radius: 50%;
	 position: absolute;
	 top: 50%;
	 tranform: translateY(-50%);
	 left: 4px;
	 content: '';
     background: blue;
}

Chỉ với vài dòng code đơn giản chúng ta đã tuỳ chỉnh dc radio button theo ý mình.
Tương tự với checkbox cũng vậy. Các bạn chỉ cần chú ý đoạn code này input[type="radio"]:checked + label
https://codepen.io/ngc-yn/pen/MWWjVQa

3. Kết luận.

Như vậy trong bài viết này mình đã hướng dẫn cách làm sao để có thể style lại các radio button, tương tự các bạn hãy thử làm với checkbox để xem mình hiểu bài ko nhé . Cảm ơn các bạn đã đọc bài viết của mình.
Demo với checkbox https://codepen.io/ngc-yn/pen/vYYXRoQ

Thực ra chúng đều thuộc về nhóm thẻ input nhưng có thuộc tính type là radio button và checkbox.

Nhóm thẻ input là không thể thiếu khi muốn làm form nhập liệu và chúng thường xuyên kết hợp với Javascript để validate (xác thực các trường dữ liệu).

Bên cạnh 5 type rất hay dùng gồm: text, password, submit, reset và email thì 2 type chuyên dụng để tạo các lựa chọn là Radio button và Checkbox bạn cũng cần nắm rõ.

Type này được dùng để chọn một trong nhiều lựa chọn, chẳng hạn chọn giới tính, chọn quốc gia đang sinh sống.

Code mẫu:

<form>
<input name="gender" type="radio" value="Nam" />Nam
<input name="gender" type="radio" value="Nữ" />Nữ
<input name="gender" type="radio" value="Khác" />Khác
</form>

Kết quả:

Nếu bạn không để thuộc tính name có cùng tên thì bạn sẽ chọn được 2 cái cùng lúc, do vậy cần lưu ý name đồng bộ khi dùng radio, vì với radio có nghĩa là chúng ta muốn chỉ một trong các lựa chọn được chọn mà thôi.

Checkbox

Radio buttons dùng để chọn chỉ một cái trong nhiều lựa chọn còn checkbox thì ngược lại, nó cho phép bạn không chọn lựa cái nào hoặc chọn nhiều cái (từ một cho đến tất cả).

Code mẫu:

<form>
<input type="checkbox" name="sport" value="Bóng đá">Bóng đá
<input type="checkbox" name="sport" value="Bơi lội">Bơi lội
<input type="checkbox" name="sport" value="Điền kinh">Điền kinh
<input type="checkbox" name="sport" value="Cầu lông">Cầu lông
<input type = "checkbox" name= "sport" value="Võ thuật">Võ thuật
</form>

Kết quả:

Thuộc tính checked

Đây là thuộc tính được dùng để đánh dấu trước một lựa chọn nào đó, chẳng hạn một Form nhập liệu yêu cầu bạn nhập Quốc gia đang sinh sống, nhưng nó cũng xác định được địa chỉ IP của bạn xuất phát từ Việt Nam nên đã tick sẵn vào đây từ trước cho bạn.

Điều này giúp người dùng của bạn giảm thiểu các thao tác phải nhập và cũng hạn chế được tối đa việc nhập sai dữ liệu. Ví dụ:

Code mẫu:

<form>
<input checked="checked" name="gioitinh" type="radio" value="VN" />Việt Nam
<input name="gioitinh" type="radio" value="TQ" />Trung Quốc
<input name="gioitinh" type="radio" value="NB" />Nhật Bản
<input name="gioitinh" type="radio" value="HQ" />Hàn Quốc
</form>