Solved

How to style a select drop down

Posted on 2013-06-28
3
574 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 56

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 56

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

749 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