Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 584
  • Last Modified:

How to style a select drop down

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
igloobob
Asked:
igloobob
  • 2
1 Solution
 
Julian HansenCommented:
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
 
igloobobAuthor Commented:
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
 
Julian HansenCommented:
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now