Css select arrow color

Как оформить раскрывающийся список с помощью только CSS?

Когда-то было довольно сложно оформить элемент для всех браузеров.

Чтобы избежать недостатков, которые были раньше, используйте оформление родительского элемента, добавление псевдоэлементов, а также применение JavaScript.

Оказывается, значительная часть стилей могут создать постоянный и приемлемый блок выбора (selection box) в новых браузерах, лучшим способом сохраняясь в старых браузерах.

Есть множество элементов в блоке выбора, к которым можно применить стиль, в частности width, height, font, border, color, padding, box-shadow и background color.

Рассмотрим пример, где применен стиль:

Пример

html> html> head> title>Заголовок документа title> style> .box < width: 120px; height: 30px; border: 1px solid #999; font-size: 18px; color: #1c87c9; background-color: #eee; border-radius: 5px; box-shadow: 4px 4px #ccc; > style> head> body> p>Обычный блок выбора: p> select> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> p>Оформленный блок выбора: p> select class="box"> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> body> html>

Но стрелка выпадающего (раскрывающегося) списка не меняется. Нет никакого непосредственного способа для ее оформления, но существуют некоторые методы, которые могут быть использованы для изменения стрелки раскрывающегося списка по умолчанию. Давайте рассмотрим эти 3 метода ниже.

1) Используйте appearance: none;

Чтобы скрыть стрелку по умолчанию раскрывающегося списка , установите CSS свойство appearance в значение «none», и дальше добавьте выбранную вами стрелку с помощью сокращенного свойства background.

Заметьте, что свойство appearance все еще считается экспериментальным, и вам потребуется использовать префикс -moz- (для Firefox) и -webkit- (для Chrome, Safari, Opera) для максимальной совместимости браузера.

Пример

html> html> head> title>Заголовок документа title> style> select < width: 140px; height: 35px; padding: 5px 35px 5px 5px; font-size: 18px; border: 2px solid #ccc; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 15% no-repeat #eee; > select::-ms-expand < display: none; /* удалите стрелку по умолчанию в IE 10 и 11 */ > style> head> body> select> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> body> html>

2) Используйте overflow: hidden;

Сначала вставьте элемент в div контейнер с фиксированной шириной и установите overflow: hidden . Потом для элемента задайте ширину на 20px больше, чем элемент . Таким образом, стрелка раскрывающегося списка будет скрыта (так как для контейнера установлено overflow: hidden ), и теперь уже можно будет применить фоновое изображение с правой стороны .

Пример

html> html> head> title>Заголовок документа title> style> .mystyle select < background: transparent; width: 140px; height: 35px; border: 1px solid #ccc; font-size: 18px; > .mystyle < width: 120px; height: 34px; border: 1px solid #111; border-radius: 3px; overflow: hidden; background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 20% no-repeat #ddd; > style> head> body> div class="mystyle"> select> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> div> body> html>

3) Используйте pointer-events: none;

CSS свойство pointer-events может быть использовано для создания индивидуальных раскрывающихся списков .

Пример

html> html> head> title>Заголовок документа title> style> .mybox < position: relative; display: inline-block; > select < display: inline-block; height: 30px; width: 150px; outline: none; color: #74646e; border: 1px solid #ccc; border-radius: 5px; box-shadow: 1px 1px 2px #999; background: #eee; > /* Select arrow styling */ .mybox .myarrow< width: 23px; height: 28px; position: absolute; display: inline-block; top: 1px; right: 3px; background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") right / 90% no-repeat #eee; pointer-events: none; > style> head> body> div class="mybox"> span class="myarrow"> span> select> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> div> body> html>

Отличным методом является использование предпочитаемых вами знаков вместо стандартного знака для блока .

Установите знаки с помощью свойства content и установите соответствующий font. Здесь можно установить «Consolas» и «monospace». Потом поверните знак пунктуации, используя свойство transform.

Пример

html> html> head> title>Заголовок документа title> style> select < width: 140px; height: 35px; padding: 4px; border-radius:4px; box-shadow: 2px 2px 8px #999; background: #eee; border: none; outline: none; display: inline-block; -webkit-appearance:none; -moz-appearance: none; appearance: none; cursor: pointer; > label < position: relative; > label:after < content:'<>'; font: 11px "Consolas", monospace; color: #666; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); right: 8px; top:2px; padding: 0 0 2px; border-bottom: 1px solid #ddd; position: absolute; pointer-events: none; > label:before < content: ''; right: 6px; top:0px; width: 20px; height: 20px; background: #eee; position: absolute; pointer-events: none; display: block; > style> head> body> label> select> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> label> body> html>

Источник

How to change select dropdown arrow in CSS?

In this blog post, I will explain how to change the arrow in a select dropdown menu. This tutorial uses CSS and HTML.

CSS is a language that tells the browser how to display things. It can be used to change pretty much anything you want on your website, and one of those things might be the dropdown arrow in select input boxes. You can do this using CSS by changing its background color or image as well as other properties such as border-radius and box-shadow. Let’s go through some examples!

How to style CSS dropdown arrow?

Many websites, including the Mozilla Developer Network, look for a way to change the select dropdown arrow. Unfortunately, there is no direct CSS property to change the arrow in select tag.

But why not? In theory, it’s very simple: You have an element with a dropdown list. If you want to change its appearance, all you need to do is configure it in CSS.

• appearance:none;
• -webkit-appearance:none; /* safari and chrome */
• -moz-appearance:none; /* Mozilla */
• -ms-appearance:none; /* Ie */

If you use the above CSS, it will look something like this-

Here you can see that there is no dropdown icon present. Now we are going to style the dropdown arrow. You can use a .png image or SVG to create your select custom arrow.

HTML structure

CSS

") no-repeat; padding: 8px 32px 8px 16px; > /* To remove the arrow of select element in IE */ .select1::-ms-expand

• In the above example, you can see I have removed the select box default styling using appearance:none;
• In background-position property, I have used a small calculation i.e. calc(100% — 12px) so that, it can align properly.
• In background property, I have set a svg icon as a dropdown.

In order to change CSS select arrow position, change the background-position value. For example, calc(100% — 12px) . Increase or decrease the value as per your need.

How to use inline SVG content as a background image?

You can directly use a .svg file directly or if you don’t want to store your .svg file in your server, you can use its content directly.

To use SVG content as a background image, open the .svg file in any text editor. Copy anything from for example-

Now in the background property inside the url() add data:image/svg+xml, first, then paste the content that you have copied.

That is what you need to take care of yourself, there is no # (hash) in the SVG content. If SVG contains hex color, just replace “#” with %23 i.e. #ffaabb would be %23ffaabb .

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment Cancel reply

Enjoying the articles? I would appreciate a coffee to help me keep writing and coding!

Trending Now

Источник

Easily change drop down arrow

Simple, we hide the standard arrow, then we create “<>” text and just rotate it 90 degrees. So if in an example above you don’t like “<>” you can load whatever font you want and just display that element instead of our “>” arrows.

 
   Select Box Option 1 Option 2 Last long option   

The CSS :

We will basically use the :after selector to add our new characters and rotate them. Since we are using absolute property to position the arrows your top div needs to have a relative property in it. The next thing is the magical appearance: none .selectdiv select <> It hides the standard button.

So the final magical CSS that will make this work is:

body < background: #f2f2f2; >.selectdiv < position: relative; /*Don't really need this just for demo styling*/ float: left; min-width: 200px; margin: 50px 33%; >/*To remove button from IE11, thank you Matt */ select::-ms-expand < display: none; >.selectdiv:after < content: '<>'; font: 17px "Consolas", monospace; color: #333; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); right: 11px; /*Adjust for position however you want*/ top: 18px; padding: 0 0 2px; border-bottom: 1px solid #999; /*left line */ position: absolute; pointer-events: none; > .selectdiv select < -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Add some styling */ display: block; width: 100%; max-width: 320px; height: 50px; float: right; margin: 5px 0px; padding: 0px 24px; font-size: 16px; line-height: 1.75; color: #333; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; -ms-word-break: normal; word-break: normal; >

That’s it!
You can adjust the top and right values however you want to adjust it for your design. You can of course change the color or remove the left line all together.

Make it more fancier

Now that we know how it works, it’s really easy to make things look way better by just including a different font. By adding a popular FontAwesome framework we can replace our “>” symbol with a down chevron. Because it’s a down chevron we don’t need to roate it like in our previous example. Here is the codepin:

Let us know where you used it and how it worked out.

Источник