Custom Select Box

Có khi nào bạn muốn custom select box mặc định với những màu sắc khác, background khác đẹp hơn, hiển thị được tốt trên cả những trình duyệt khó tính như IE ko? Hãy theo dõi thử ví dụ dưới đây để thử tạo 1 select box mới theo ý mình.

Có khi nào bạn muốn custom select box mặc định với những màu sắc khác, background khác đẹp hơn, hiển thị được tốt trên cả những trình duyệt khó tính như IE ko? Hãy theo dõi thử ví dụ dưới đây để thử tạo 1 select box mới theo ý mình.

Đơn giản thôi, cứ thêm style cho thẻ select là được.

Đổi màu sắc cho background chẳng hạn:

select {
	background-color: #212121;
}

Hay đặt background image cho select:

select {
	background: #212121 url("images/bkg-select-2.jpg") no-repeat right 0;
	color: #443737;
}

Hay bo tròn góc cho select:

select {
	border-radius: 4px;
}

Mọi việc ổn cả phải ko, và chỉ có 1 vấn đề xảy ra thôi. Đó chính là mũi tên mặc định của select box.

Chúng ta có thể ẩn mũi tên này đi bằng thuộc tính:

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

OK rồi, bạn thử test lại trên Chrome, Firefox, IE xem nhé. Nó hiển thị tốt trên Chrome, Firefox, IE10+.

Nhưng nếu khách hàng của bạn là 1 người khó tính, yêu cầu select box hiển thị đẹp cả trên IE9 thì chúng ta cần phải tìm 1 cách khác vì thuộc tính appearance: none; chỉ chạy được trên IE10+ thôi.

Chúng ta có thể sử dụng 2 cách dưới đây

1. Sử dụng overflow: hidden

Chúng ta cần sử dụng 1 thẻ bao ngoài select, thiết lập chiều rộng cho thẻ bao ngoài nhỏ hơn chiều rộng của select bên trong. Đồng thời thêm thuộc tính overflow: hidden cho thẻ bao ngoài thì ta sẽ ẩn đi được mũi tên của select.

<div class="wrap-select">
	<select>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</div>

.wrap-select {
	width: 302px;
	overflow: hidden;
}
.wrap-select select {
	width: 320px;
	margin: 0;
	background-color: #212121;
}

Bạn hãy xem hình ảnh này để hiểu rõ hơn:

Tuy nhiên nếu web của bạn có rất nhiều select box với nhiều kích thước khác nhau thì bạn sẽ phải viết thêm 1 số lương kha khá dòng css để set width cho select sao cho dài hơn width của của wrap-select 1 khoảng (đủ để ẩn mũi tên của select đi).

Vậy nên chúng ta sẽ tìm 1 cách để chỉ phải set width 1 lần và ko phải mất time đo đạc khoảng cách để ẩn mũi tên của select đi nữa. Chính là cách thứ 2 dưới đây.

2. Sử dụng thẻ span thay thế

Chúng ta sẽ sử dụng cấu trúc sau:

<div class="wrap-select">
	<span>Option 1</span>
	<select class="sl-bkg-img sl-remove-arrow">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</div>

Mọi style về layout, background sẽ đặt cho thẻ div (wrap-select) bao bên ngoài, thẻ span là để hiển thị text của option đã chọn. Và chúng ta cần phải giảm opacity của thẻ select xuống 0, đặt position cho nó là absolute, và để nó đè lên thẻ span.

Sử dụng style như sau:

.wrap-select {
	background: #dddddd url("images/bkg-select-2.jpg") no-repeat 0 0;
	color: #443737;
	width: 302px;
	height: 52px;
	line-height: 52px;
	position: relative;
}
.wrap-select span {
	height: 100%;
	width: 100%;
	display: block;
	padding-left: 10px;
	box-sizing: border-box;
}
.wrap-select select {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Thực ra text ta nhìn thấy là text của thẻ span chứ ko phải của select box, vì select box đã được giảm opacity xuống còn 0. Khi ta click vào text thì chính là click vào select box, vì ta đã đặt position absolute cho select box để nó đè lên thẻ span.

Dùng cách này bạn ko phải lo lắng về việc set width cho select dài hơn width của wrap-select nữa mà chỉ cần set width cho wrap-select thôi.

Để hoàn thiện phương pháp này, ta cần thêm 1 đoạn jquery nhỏ để update lại text của thẻ span khi người dùng chọn 1 option khác.

$('.wrap-select select').change(function(){
	$(this).prev().text($(this).find("option:selected").text());
});

Đây là link demo: http://shiroad.com/example/custom-select-box/index.html

Download source code: https://github.com/ducthang310/dt-example/tree/master/custom-select-box

Chúc các bạn sẽ tạo được các select box đẹp như ý mình mong muốn 🙂