Định dạng INPUT
Sử dụng thuộc tính width để khai báo bề ngang của input.
input
{
width: 100%;
}
Ví dụ
trên áp dụng cho tất cả phần tử <input>. Nếu bạn chỉ muốn định dạng 01 input nhất định, bạn có thể
dùng cách chọn qua thuộc tính.
input[type=text] – chỉ chọn text fields
input[type=password] – chỉ chọn các password fields
input[type=number] – chỉ chọn các number fields
và
còn nhiều trường khác nữa.
Padded Inputs
Dùng thuộc tính padding để thêm khoảng trắng bên trong text
field.
Mẹo: khi bạn có nhiều inputs xen kẽ nhau, bạn cũng sẽ muốn
thêm vào margin
để thêm khoảng cách giữa chúng.
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Chú
ý rằng chúng ta thiết lập thuộc tính box-sizing cho border-box. Điều này đảm bảo rằng padding và ngay cả các đường viền được
bao gồm trong kích thước tổng chiều cao và bề rộng của các phần tử.
Bordered Inputs
Dùng thuộc tính border để thay đổi kích thước và màu sắc đường
viền, và dùng thuộc tính border-radius
để bo tròn đường viền.
Ví dụ:
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Nếu
bạn chỉ muốn 01 đường viền dưới, dùng thuộc tính border-bottom.
Ví dụ:
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Colored Inputs
Dùng thuộc tính background-color để thêm 01 màu nền cho input,
và thuộc tính color
để đổi màu chữ,
Ví dụ:
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Focused Inputs
Mặc định, vài trình duyệt sẽ thêm viền xanh quanh input khi
nó được chọn. Bạn có thể bỏ hành vi này bằng cách thêm outline:none;
đối với input.
Dùng thuộc tính :focus để làm điều gì đó với input field khi
nó được chọn:
Ví dụ:
Tạo nền xanh khi input được chọn:
input[type=text]:focus
{
background-color: lightblue;
}
Tạo
viền đen khi input được chọn:
input[type=text]:focus
{
border: 3px solid #555;
}
Input có hình icon
Nếu bạn muốn thêm biểu tượng bên trong input, dùng thuộc
tính background-image
và định vị trí nó bằng thuộc tính background-position
Chúng ta cũng cần chú ý rằng cần phải lùi padding 01 khoảng
lớn để chừa chỗ cho biểu tượng.
Ví dụ:
input[type=text]
{
background-color: white;
background-image:
url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
Search Input động
Trong ví dụ này, chúng ta dùng thuộc tính transition để làm
thay đổi thuộc tính width của ô Search Input khi được chọn.
input[type=text]
{
transition: width 0.4s
ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Định dạng Textareas
Mẹo: sử dụng thuộc tính resize để ngăn textareas bị thay đổi kích thước(vô
hiệu hóa nút “grabber” ở góc phải)
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none; // là cái này
}
Định dạng Select Menus
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Định dạng Input Buttons
input[type=button],
input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Mẹo: dùng width: 100% đối với nút dài hết bề ngang*/
Biểu mẫu responsive
Thay đổi cửa sổ trình duyệt để thấy hiệu ứng. Khi màn hình
nhỏ hơn 600px, 02 cột sẽ tự động xếp chồng lên nhau thay vì nằm kế tiếp nhau.
Đây gọi là màn hình responsive.
Ví dụ:
<html>
<head>
<style>
*
{
box-sizing: border-box;
}
input[type=text],
select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label
{
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit]
{
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover
{
background-color: #45a049;
}
.container
{
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25
{
float: left;
width: 25%;
margin-top: 6px;
}
.col-75
{
float: left;
width: 75%;
margin-top: 6px;
}
/* Chặn floats sau các cột */
.row:after
{
content: "";
display: table;
clear: both;
}
/* Responsive
layout - khi màn hình bề rộng nhỏ hơn 600px, nó sẽ tạo ra 02 cột xếp chồng lên nhau thay vì nằm cạnh nhau*/
@media
screen and (max-width: 600px) {
.col-25, .col-75,
input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the
browser window to see the effect. When the screen is less than 600px wide, make
the two columns stack on top of each other instead of next to each other.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First
Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last
Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject"
name="subject"
placeholder="Write something.."
style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Nếu vẫn chưa rõ các bạn xem thêm video clip sau:
Xem MỤC LỤC BÀI VIẾT VỀ CSS
- Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
- Trang fan page: https://www.facebook.com/lophocvitinhcom
- Trang web: http://lophocvitinh.com
Không có nhận xét nào:
Đăng nhận xét