CSS Attributes Selectors


<h2>Login Forms</h2>

<form method="post" action="">
  Username:<input type="text" name="user"  size="20"><br>
  Password:<input type="password" name="pass" size="20"><br>
  <input type="button" value="Login">
</form>

Ví dụ nếu ta có 1 form. Nếu muốn thêm css vào form ta có thể dùng id hoặc class. Nhưng nếu ta muốn dùng thẻ thì sao? nếu ta dùng thẻ input thì lúc này 3 input là username, password và button login sẽ cùng bị ảnh hưởng. Do đó ta dùng CSS attribute selector. Cấu trúc attribute selector như sau: tag[attribute=value].

/* CSS */
<style>
 input[type="text"] {
   background-color: yellow;
 }

 input[type="password"] {
   background-color:orange;
 }

 input[type="button"] {
   background-color:lightgray;
   color:blue;
 }

</style>

<!-- HTML -->
<h2>Login Forms</h2>

<form  action="" method="post">
  Username:<input type="text" name="user"  size="20"><br>
  Password:<input type="password" name="pass" size="20"><br>
  <input type="button" value="Login">
</form>

Login Forms

Username:
Password:

Ngoài ra còn một số cách dùng css attribute selector khác nữa nhưng mình thấy ít dùng. Các bạn google tìm hiểu thêm nhé. ^_^