JSFiddle - React, Tailwind, and code Playground

by Tìm ở đây Khoá học CNTT

HTML

<p>Trong ví dụ này, chúng ta sử dụng bộ chọn :focus để thêm màu nền cho trường đầu vào văn bản khi người dùng click chuột nhập thông tin.</p>
<p>Chú ý rằng chúng ta đã thêm thuộc tính transition trong CSS để thay đổi màu đường viền (mất 0.5 giây để thay đổi màu khi click chuột vào trường đầu vào văn bản.</p>

<form>
  <label for="fname">Họ</label>
  <input type="text" id="fname" name="fname" value="Tìm">
  <label for="lname">Tên</label>
  <input type="text" id="lname" name="lname" value="Ở Đây">
</form>

CSS

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}