2015 November 04 Archive - EXEIdeas

HTML select fields provide essentially the same functionality as HTML Checkbox Fields. They allow the user to select one or more values from a pre-determined series of options.Incorporating a select field into a web page is done using the select tag. List values are then added to the field using theoption tag, similar to how list itemsare added to ordered list elements ().I often have to use a select box when I’m putting together a custom form that requires a drop down list. It took me a while to figure out how to easily style the select box using only CSS since certain parts are browser specific, such as the drop down arrow.Default Style:Here is how a select box will look by default:Here is the first optionThe second option Here is the first option The second option Customized Style:But that annoying drop down arrow always stays the same. There is no direct way to do style it, but the workaround is pretty simple.First we need to surround our select box element with a div container: Here is the first option The second option Next we need to add a bit of CSS to make sure that the elements of the select box are styled a certain way. We need to make sure that our select box actually spans wider than the surrounding div container so that the default drop down arrow disappears. This is the new drop down arrow I want to use:Our div container needs to be styled like so in order for the new arrow to appear where we want it to:.styled-select{background: url('https://www.exeideas.com/wp-content/uploads/2014/05/down_arrow_select.jpg') no-repeat right #ffffff;width: 268px;padding: 5px;font-size: 16px;border: 1px solid #ccc;height: 34px;}Our select box should now look like this:.styled-select{background: url('https://www.exeideas.com/wp-content/uploads/2014/05/down_arrow_select.jpg') no-repeat right #ffffff;padding: 5px;border: 1px solid #ccc;height: 34px;}Here is the first optionThe second optionKnowing this little workaround will make it a whole lot easier to style your select box exactly how you want it to be styled using nothing but CSS.Last Words:That’s all we have. If you have any problem with this code in your codings then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…