Styling select element box in CSS
In this post we will give you information about Styling select element box in CSS. Hear we will give you detail about Styling select element box in CSSAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to style a <select> element box in CSS.
By default select element styling varies from browser to browser, so that we can create our own custom styling to look the same in all browsers.
This example shows you how to style a select dropdown with your own styling.
<select> <option>Apples</option> <option selected>Pineapples</option> <option>Chocolate</option> <option>Pancakes</option></select>
select { margin: 50px; width: 550px; font-size:17px; padding: 10px 35px 10px 10px; font-size: 16px; border: 1px solid #ccc; height: 54px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(http://tuckeralbin.com/wp-content/uploads/intense-cache/icons/plugin/font-awesome/angle-double-down.svg); background-repeat:no-repeat; background-size: 5%; background-position: 98% 50%;}select::-ms-expand { display: none; /* remove default arrow on ie10 and ie11 */}In this above example, we are using appearance:none css property to hide the select element arrow then we added our own arrow using background css property.
background-size property is used to set the size of a dropdown arrow.
background-position property is used to position the arrow in the x-axis and y-axis.
Demo 1
Demo 2
In this demo, we have changed background-color and font-family to the select element.
Hope this code and post will helped you for implement Styling select element box in CSS. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs