Кастомизация select: как убрать все рамки и фон?

Question

[big_hasan]

В стандартном варианте все устраивает, кроме наличия рамки (первый рисунок). При попытке убрать рамку через css border: none; она исчезает, но появляется оформление кнопки. Можно ли как-то кастомизировать, чтобы остались только текст и кнопка "стрелка"?

Answer 1

[Анатолий Медведев]

jsfiddle.net/danield770/YvCHW/4232

Подробнее зедсь

Comments

[big_hasan]

Анатолий Медведев : Спасибо! Ваш вариант заработал. Хоть и хотелось обойтись без бэкграундных картинок, но, раз это работает и пока единственный вариант, будем юзать))

[Артур Арутюнян]

Рилли работает, спасибо брательник, при чем я такую версию пробовал но у меня не работало - но тут как-то хитро задан бэкграунд))) Одним слово все фурычит))) сэнкс гайз

Answer 2

[Astrohas]

select{
-moz-appearance: none;
-webkit-appearance: none;
border: none;
position: relative;
outline: none;
padding: 5px;
padding-right: 40px;


}
select:after{
	content: "";
	display: block;
	width: 25px;
	height: 25px;
	background-image: url("/put_k_strelke");
	position: absolute;
	right: 5px;
	top: 5px;
}

Comments

[big_hasan]

Хасан Истамкулов Извиняюсь, что поспешно задаю вопрос, предварительно не проверив (пока не могу, позже это сделаю). Кнопка со стрелкой будет ведь не кликабельна в таком варианте, верно?

[Astrohas]

big_hasan: да походу так

[Astrohas]

big_hasan: можно задать прозрачнй фон а стрелке индекс н же чем полю

[big_hasan]

Хасан Истамкулов : Нагуглил следующее утверждение: псевдоэлементы after и before не применимы к селекту, поскольку у него нет контента..

[Astrohas]

big_hasan: да затупил я затупил

Answer 3

[Айнур Валиев]

phpjs.ru/2017/02/28/customize-select