Jquery – How to style elements

cssdrop-down-menujqueryselectxhtml

How can I completely change the design of a <select> element? For example, this is how I want my dropdown to look:

Is there a way to do it with CSS? If not, jQuery?

Best Answer

CSS will only help you in certain browsers - for instance, Internet Explorer will ignore it for SELECTs completely

you can, however, still use an ordinary select on page without any CSS whatsoever and then use a jQuery plugin that degrades gracefully (so when people don't have JS enabled, they will still see that original select box)

one of such plugins is this great jQuery UI selectmenu from Filament Group

however, as pointed out by clonked in comments - use at least some browser sniffing to check whether people are not accessing that menu from iPhone or similar devices, as they might have problems accessing that JS select box

if you're by any chance using PHP on the server side, here's a nice browser sniffing library for you: http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

Related Solutions

Javascript – n “exists” function for jQuery

In JavaScript, everything is 'truthy' or 'falsy', and for numbers 0 means false, everything else true. So you could write:

if ($(selector).length)

You don't need that >0 part.

Javascript – How to know which radio button is selected via jQuery

To get the value of the selected radioName item of a form with id myForm:

$('input[name=radioName]:checked', '#myForm').val()

Here's an example:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

Related Topic

• Css – How to disable text selection highlighting
• Css – CSS parent selector
• Javascript – event.preventDefault() vs. return false
• Html – How to style a

dropdown with only CSS

Sql – How to UPDATE from a SELECT in SQL Server

Javascript – Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

Html – How to make a placeholder for a ‘select’ box

Javascript – Is it possible to apply CSS to half of a character