Solved

style a dropdownlist to not show the down arrow icon on the right?

Posted on 2011-09-20
3
357 Views
Last Modified: 2012-06-27
Is there a way through jquery / css to style a dropdownlist so that it appears as a text label?

See my mock-up.

 ddl
0
Comment
Question by:Tom Knowlton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 3

Accepted Solution

by:
mykde earned 250 total points
ID: 36568351
Unfortunately browsers allow limited skinning of select boxes.  

So I recommend using jQuery to change a select box into a text box and a unorded list for the dropdown.  When a user clicks on the text box it will display the list below the textbox, just like a regular select box, but it’s easier to style.

Here is a link to a very detailed example. http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 36569092
may help : http://jsfiddle.net/9UFge/

<span>Select a State</span>
<select>
    <option value="">Select a State</option>
    <option value="AL">Alabama</option>
    <option value="CA">California</option>
</select>

Open in new window


    $("span").click(function() {
        $("select").css("display","block");
    })
    $("select").change(function() {
        $("span").html( $("option:selected",this).text() );
        $("select").css("display","none");
    }) 

Open in new window

0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 36575244
thx
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question