Solved

How to style a select drop down

Posted on 2013-06-28
3
559 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 51

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 51

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

708 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