Áp dụng kiểu cho các phần tử HTML có các thuộc tính cụ thể bằng Bộ chọn thuộc tính trong CSS. Có các quy tắc sau được áp dụng cho bộ chọn thuộc tính.
-
p [lang] - Chọn tất cả các phần tử đoạn văn có thuộc tính lang.
-
p [lang ="fr"] - Chọn tất cả các phần tử đoạn có thuộc tính lang có giá trị chính xác là "fr".
-
p [lang ~ ="fr"] - Chọn tất cả các phần tử đoạn có thuộc tính lang chứa từ "fr".
-
p [lang | ="en"] - Chọn tất cả các phần tử đoạn có thuộc tính lang chứa các giá trị chính xác là "en" hoặc bắt đầu bằng "en-".
Sau đây là mã cho các biểu mẫu tạo kiểu với bộ chọn thuộc tính CSS -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input[type="text"] {
width: 300px;
display: block;
margin-bottom: 10px;
background-color: rgb(195, 250, 247);
font-size: 18px;
padding: 15px;
border: none;
}
input[type="submit"] {
padding: 10px;
font-size: 18px;
border: none;
outline: none;
background-color: rgb(75, 163, 16);
color: white;
}
input[type="password"] {
width: 300px;
padding: 10px;
background-color: red;
color: white;
border: none;
}
</style>
</head>
<body>
<h1>Css attribute selector example</h1>
<form>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" value="Ron" />
<label for="lname">Last name:</label><br />
<input type="text" id="lname" name="lname" value="Shaw" />
<label for="pass">Password:</label><br />
<input type="password" id="pass" name="pass" value="password" />
<input type="submit" value="Submit" />
</form>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
