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
Solved

How to style a select drop down

Posted on 2013-06-28
3
573 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 55

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 55

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

860 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