CSS Как убрать стрелку у select

Для сайта от верстальщика очень часто хотят красивый вид для select, но при этом, чтобы он отрабатывал стандартно на мобильных.

Как в CSS убрать стрелку вниз для тега select

Нашему селекту добавим специальный класс, и пишем такие правила:

.select-sort-mobile {
	/* for Firefox */
	-moz-appearance: none;
	/* for Chrome */
	-webkit-appearance: none;
}
.select-sort-mobile::-ms-expand {
	/* IE */
	display: none;
}

Теперь вопрос как же быть со стрелкой? Ведь её нужно чем-то заменить. Для этого обернем наш select в контейнер и добавим ему ::after, чтобы отобразить нашу картинку:

.sort-form-mobile-wrap::after {
	z-index: -1;
	border-left: 1px solid #E9E9E9;
	content: "";
	position: absolute;
	right: 0;
	width: 36px;
	height: 32px;
	background: url(../images/arrow-down.png);
	background-repeat: no-repeat;
	top: 0%;
	background-position-y: 52%;
	background-position-x: 50%;
}

Вот и всё, у вас готов красивый select, без использования JS плагинов 🙂 .

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *