Solved

How to style a select drop down

Posted on 2013-06-28
3
563 Views
Last Modified: 2013-06-28
Hello,

I'm working on a site that has a navigation ul that changes to a select list on smaller devices. I want to style the drop down so it looks better than the standard one with the blue arrow. I just want a plain white box, grey text (in my chosen webfont) and a grey arrow.

I have found some tutorials online about how to do this for an existing select list but not sure how I can get it to work when the select is generated by javascript at certain screen sizes.

Can anyone advise please?

      
          <nav-bar>
            <ul>
              <li><a href="#"  class="selectservice">PLEASE SELECT SERVICE</a></li>
              <li><a href="commercial_grounds_maintenance.html">COMMERCIAL GROUNDS MAINTENANCE</a></li>
              <li><a href="private_garden_maintenance.html">PRIVATE GARDEN MAINTENANCE</a></li>
              <li><a href="garden_design.html">GARDEN DESIGN</a></li>
              <li><a href="landscaping.html">LANDSCAPING</a></li>
              <li><a href="forestry.html">FORESTRY</a></li>
            </ul>
          </nav-bar>


<!-- FOR RESPONSIVE DROP DOWN MENU SWITCH -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="js/menudropdown.js"></script>




CSS

nav-bar ul {
  list-style: none;
  overflow: hidden;
  background: #fff;
  margin-top: 20px;
  padding: 5px;
  text-align: center;
}
nav-bar ul li {
  display: inline-block;
  margin-right: 13px;
  margin-left: 0;
  margin-bottom: 0;
 
}


nav-bar ul li:last-child {
  margin-right: 0;
  margin-left: 0;
 
}
nav-bar ul li a{
  font-size: 14px;
  color: #666;
}
nav-bar ul li a:hover{
  font-size: 14px;
  color: #333;
}


nav-bar select {
  display: none;
  width: 100%;
  margin-top: 20px;
}

.selectservice {
      display: none;
}

@media (max-width: 960px) {
  nav-bar ul     { display: none; }
  nav-bar select { display: inline-block; }
  nav-bar .selectservice {
        display:inline-block!important;
  }
}
0
Comment
Question by:igloobob
  • 2
3 Comments
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39284213
You can't style the native select boxes - you would need to use a trick or javascript library to fudge it.

Here is an example doing it with CSS

http://bavotasan.com/2011/style-select-box-using-only-css/

A thread that covers a scripted solution

http://stackoverflow.com/questions/8201306/css-html-styling-select-boxes-properly
0
 

Author Comment

by:igloobob
ID: 39284378
Hi Julian,

I had read those tutorials, I was struggling with getting them to work though but I have just tried again and it's working, it was late when I was trying last time so obviously did something simple very wrong!

Cheers
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39284416
Awsome - we have all been there - sometimes a couple of hours distance and fresh pair of eyes is all that is needed.

Thanks for the points.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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)

932 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now