Menu thả xuống Chọn kiểu trong Chrome - Góc vuông và Chiều cao

Gần đây, bạn có nhận thấy rằng khi bạn xem menu thả xuống với trình duyệt Chrome hoặc Safari, chúng có chiều cao rất hẹp và cũng có các góc được làm tròn? Điều này xảy ra nếu bạn đang sử dụng plugin biểu mẫu hoặc tiện ích Lưu trữ hoặc Danh mục WordPress với tùy chọn thả xuống. Tất cả chúng trông giống như hình dưới đây - các góc tròn và chiều cao hẹp so với Firefox, mặc dù chúng có cùng kiểu CSS với các trường nhập khác.

Các menu thả xuống chọn góc tròn, nhỏ dường như không phù hợp khi phần còn lại của các đầu vào biểu mẫu của bạn có kích thước đẹp hơn (kích thước thân thiện với thiết bị di động cho màn hình cảm ứng) và cũng có các góc vuông.

Hướng dẫn này giúp bạn tạo kiểu cho menu chọn thả xuống trong Chrome cho các góc vuông và chiều cao để khớp với các trường nhập biểu mẫu khác. Tôi đang sử dụng chủ đề Genesis Sample, nhưng bản sửa lỗi cũng sẽ hoạt động đối với bất kỳ chủ đề WordPress nào.

Kiểu mặc định cho trường nhập biểu mẫu

Các kiểu mặc định từ style.css cho chủ đề Genesis Sample cho các trường đầu vào, bao gồm các trường chọn, nằm bên dưới.
input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #333;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 300;
	padding: 16px;
	width: 100%;
}
Đối với các ví dụ của tôi, tôi đã thay đổi dòng đệm padding: 12px 16px;và thay đổi màu sắc bởi vì tôi hiện đang làm việc trên một chủ đề tùy chỉnh cho khách hàng.
input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ccc;
	color: #545454;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 400;
	padding: 12px 16px;
	width: 100%;
}

Sửa chiều cao

Nếu bạn đã thêm các góc tròn vào các trường nhập biểu mẫu khác của mình, bạn chỉ cần sửa chiều cao của trình đơn thả xuống đã chọn. Lưu ý rằng việc thay đổi kích thước đệm dường như không ảnh hưởng đến chiều cao.

Sở thích của tôi là thêm chiều cao vào vùng chọn. Bạn sẽ cần phải điều chỉnh chiều cao của mình để phù hợp với các trường biểu mẫu khác của bạn. Ví dụ của tôi, 50px hoạt động tốt. Thêm cái này vào style.css chủ đề của bạn, ngay bên dưới các kiểu trường biểu mẫu mặc định ở trên.

select {
	height: 50px;  /* Chrome & Safari height */
}

Một tùy chọn khác là thêm -webkit-appearance: none;, mà không cần khai báo chiều cao, nhưng nhược điểm là nó cũng sẽ loại bỏ các mũi tên trên trình đơn thả xuống.

Xóa góc tròn hoặc thêm góc vuông

Làm cho các góc vuông là một chút khó khăn, nhưng tôi không tìm thấy bất cứ điều gì hoạt động tốt hơn. Đây là CSS hoàn chỉnh mà bạn có thể sử dụng để thêm chiều cao và các góc vuông. Thêm cái này vào style.css, ngay bên dưới các kiểu mặc định ở trên để nhập, chọn, vùng văn bản.
select {
	padding: 10px 16px; /* Firefox */
height: 50px;  /* Chrome & Safari */
-webkit-border-radius: 0;
border: 0;
outline: 1px inset #fff;
outline-offset: -1px;

}

Giải thích về CSS

  • Phần đệm có thể được điều chỉnh cho Firefox, nếu bạn thấy văn bản bị cắt. Chỉ cần làm cho phần đệm trên cùng và dưới cùng nhỏ hơn một vài pixel so với kiểu mặc định.
  • Tiếp theo là phần khai báo chiều cao; điều chỉnh điều này để trường chọn khớp với chiều cao của các trường đầu vào khác.
  • Bốn dòng cuối cùng là những gì làm cho các góc vuông; #fff là màu nền trong CSS mặc định.
Và đây là những hình ảnh trước và sau, vì vậy bạn có thể so sánh sự khác biệt mà một vài dòng mã tạo ra. Firefox trước và sau là trong hình ảnh đầu tiên.

Ý chính về CSS có ở đây. Bạn cũng có thể đọc một hướng dẫn khác, nếu bạn cần điều chỉnh vị trí hoặc kích thước của các nút radio và hộp kiểm trong chủ đề Genesis.