Select dropdown border css

How to Style a Box Drop-Down with Only CSS?

It has been hard for a long time to style the element across all browsers.

A reasonable set of styles, as it turns out, can create a consistent and attractive selection box across new browsers while remaining just fine in older ones as well.

There are several elements of a select box that can be styled, particularly the height, width, font, border, color, padding, box-shadow and background color.

Example of styling a select box:

html> html> head> title>Title of the document 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>An ordinary select box: p> select> option>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> p>A styled select box: p> select class="box"> option>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> body> html>

Result

However, the annoying drop-down arrow continually stays the same. There is no direct way to style it, but there are some tricks that can be used to change the default drop-down arrow. Let’s discuss some methods below.

Use appearance: none;

To hide the default arrow of the dropdown, set the CSS appearance property to its «none» value, then add your individual arrow with the help of the background shorthand property.

Note that the appearance property is still considered to be an experimental technology and you need to use -moz- (for Firefox) and -webkit- (for Chrome, Safari, Opera) prefixes for maximum browser compatibility.

Example of adding an individual arrow by using the appearance property:

html> html> head> title>Title of the document 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; > style> head> body> select> option>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> body> html>

Use overflow: hidden;

Note that the disadvantage of this method is that the options are visually more extended than the select menu.

Example of adding an individual arrow by using the overflow property:

html> html> head> title>Title of the document 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>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> div> body> html>

Use pointer-events: none;

The CSS pointer-events property can be used to create individual drop-downs, by overlaying an element over the native drop-down arrow (to create the custom one) and disallowing pointer-events on it.

Example of creating an individual drop-down by using the pointer-events property:

html> html> head> title>Title of the document 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>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> div> body> html>

Use punctuation marks instead of the drop-down arrow

It is quite pretty to use your preferred marks instead of the annoying drop-down sign of the box.

Set the marks in the content property and set the corresponding font to look good. Here, we set «Consolas» and «monospace». Then, you need to rotate the punctuation marks using the CSS transform property.

Example of using a punctuation mark instead of the drop-down arrow:

html> html> head> title>Title of the document 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); 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>Coffee option> option>Tea option> option>Juice option> option selected>Cocktail option> select> label> body> html>

Источник

How To Easily Style A Select Dropdown

If you’ve ever tried to style a select dropdown you know the frustration. Because they are styled by the browser, they can be tricky to manipulate. In this post, I’ll show you how to easily style a select dropdown.

My example today will come from a select dropdown found on my own shop page. It looks like this, a basic Chrome select element:

A real beauty, eh? We need to open it up a bit, replace that down arrow, and take control back from the browser.

Here’s the code for the select element above:

form class="woocommerce-ordering" method="get"> select name="orderby" class="orderby"> option value="menu_order" selected="selected">Default sortingoption> option value="popularity">Sort by popularityoption> option value="rating">Sort by average ratingoption> option value="date">Sort by newnessoption> option value="price">Sort by price: low to highoption> option value="price-desc">Sort by price: high to lowoption> select> input type="hidden" name="paged" value="1"> form>

How To Easily Style a Select Dropdown

Step 1: Create a border AROUND the select element.

First, we want to create a border around the element. So looking at our code, this would be the form element. My CSS would look something like:

form.woocommerce-ordering  border: 1px solid black; >

Step 2: Remove the border of the select element itself

Now remove the border from the actual select element, and align vertically:

form.woocommerce-ordering select  border: 0; vertical-align: middle; background: transparent; >

Step 3: Remove and Replace the arrow

Now to get rid of those double arrows. First, remove these by adding to your select CSS:

form.woocommerce-ordering select  border: 0; vertical-align: middle; background: transparent; -webkit-appearance: none; appearance: none; padding-left: 5px; >

In order to add a new arrow, we will need to use a pseudoelement. If you use FontAwesome, you can substitute that Unicode (it will look much better). I don’t use FA, so I’m going to use another. Also, you may have to adjust a bit to best fit your own scenario. Here’s the CSS:

form.woocommerce-ordering:after  content: '\2304'; font-size: 30px; line-height: 23px; padding-right: 2px; >

Conclusion

And that’s a simple way to style a select dropdown. Get creative with it now. Curve the border a bit with border-radius. Give it a box shadow. It’s all yours now, not the browser’s!!

Источник

How to Style a Select Dropdown Box Using CSS Only

In this tutorial, learn how to style a select dropdown box in CSS. The short answer is to use the ‘ appearance: none ‘ CSS property that removes the overall default style including the arrow.

You can also use the CSS property ‘ overflow: hidden ‘ to change the arrow of the select dropdown box. Let’s find out the different methods to style the select box with the examples given below.

How to Style a Select Dropdown Box in CSS

You can change the background, font size, the color of text, add borders, and other properties to style the select dropdown box using CSS properties. It’s easier to style CSS as given in the example below.

The above example shows the added background, the color of the text, and the font size of the select box.

However, you cannot change the default with these CSS properties. Let’s find out the below methods to change the default arrow of the select box.

Change Select Dropdown Arrow Using ‘appearance: none’ in CSS

The default select box contains an arrow that shows the dropdown in a form. However, you can change the select dropdown arrow using the CSS property ‘ appearance: none ‘. It removes the overall style of the select box. After that, you can add your style to the select box as per your requirements.

You can add font awesome icons in place of the select box arrow. After that, you can change the color and font size of the font awesome icon to match it with your select dropdown box.

Источник

How To Style HTML Select Dropdown Using Only CSS

Styling an HTML select dropdown was always pretty frustrating because the annoying drop down arrow always stays the same. There isn’t too much stuff we can apply to it, just properties like color, background, font or border. As there is no direct way to do style it, it took me a while to figure out how easily we can style an HTML select dropdown using only CSS.

In this article, I’m going to show you a quick and easy way to style the select dropdown.

Disclaimer, Though there are a lot of jQuery plugins that can help you build beautiful and sophisticated dropdowns, sometimes I feel, it is just too much for a dropdown.

The HTML markup

To get started, we just need a default HTML drop-down markup.

 This is option 1 This is option 2 This is option 3 This is option 4 This is option 5 

The CSS

The default dropdown arrow and a border is all part of the default «appearance» of the form element.So, you just need to make sure appearance: none; is set in your styling css. Here background image holds the custom arrow.

/* body select.select_box */ body select < display: block; padding: 10px 70px 10px 13px !important; max-width: 100%; height: auto !important; border: 1px solid #e3e3e3; border-radius: 3px; background: url("https://i.ibb.co/b7xjLrB/selectbox-arrow.png") right center no-repeat; background-color: #fff; color: #444444; font-size: 12px; line-height: 16px !important; appearance: none; /* this is must */ -webkit-appearance: none; -moz-appearance: none; >/* body select.select_box option */ body select option < padding: 0 4px; >/* for IE and Edge */ select::-ms-expand < display: none; >select:disabled::-ms-expand

Knowing this little quick and easy workaround will make it a whole lot easier to style select dropdown. If you see any issues with CSS or not working as expected, Your site probably have some default styles that might conflict. In that scenario, you’ve to use the above CSS in a class.

If you like this post, I would also recommend that you read another tutorial on «How To Style Checkbox or Radio Button Using Only CSS»

Источник