?
Solved

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

Posted on 2011-09-20
3
Medium Priority
?
360 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 1000 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 1000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

777 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