Bootstrap css navbar-inverse dropdown how to change color of checkbox label text


Tags: html,css,twitter-bootstrap,checkbox

Problem :

I have a dropdown in a navbar-inverse navbar on my bootstrap. The dropdown has some checkboxes. All looks ok on desktop/tablet: white background, black text. On a 'phone, the checkbox background is black, but the label text is dark grey, so doesn't show up too good:

html:

<nav id="header" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <form role="form" id="formx">
                <div class="radio">
                  <label><input type="radio" name="optradio">Option 1</label>
                </div>
                <div class="radio">
                  <label><input type="radio" name="optradio">Option 2</label>
                </div>
                <div class="radio">
                  <label><input type="radio" name="optradio">Option 3</label>
                </div>
                <div class="checkbox">
                  <label><input type="checkbox" checked="checked">Option 1</label>
                </div>
                <div class="checkbox">
                  <label><input type="checkbox" >Option 2</label>
                </div>
                <div class="form-group">
                  <label for="species">Species</label>
                  <input id="species" class="form-control" type="text"/>
                </div>
                <div class="form-group">
                  <label for="risk">Risk</label>
                  <select input id="risk" class="form-control"/>
                    <option>Low</option>
                    <option>Medium</option>
                    <option>High</option>
                  </select>
                </div>
              </form>
            </ul>
        </li>
        <li id="map-link"><a href="#">Search</a></li>
        <li id="list-link"><a href="#">Actions</a></li>
        <li id="locate-link"><a href="#">Locate</a></li>
        <li id="more-link"><a href="#">More</a></li>
      </ul>
    </div>
  </div>
</nav>

I had a quick look in bootstrap.css and then tried this in the css:

@media (max-width: 767px) {
  .navbar-inverse .dropdown-menu .radio label:
     color: #fff;
     background-color: transparent;
  }
}

@media (max-width: 767px) {
  .navbar-inverse .dropdown-menu .radio label:color:#fff;
  background-color:transparent;
}
}
<nav id="header" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <form role="form" id="formx">
              <div class="radio">
                <label>
                  <input type="radio" name="optradio">Option 1</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optradio">Option 2</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optradio">Option 3</label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" checked="checked">Option 1</label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox">Option 2</label>
              </div>
              <div class="form-group">
                <label for="species">Species</label>
                <input id="species" class="form-control" type="text" />
              </div>
              <div class="form-group">
                <label for="risk">Risk</label>
                <select input id="risk" class="form-control" />
                <option>Low</option>
                <option>Medium</option>
                <option>High</option>
                </select>
              </div>
            </form>
          </ul>
        </li>
        <li id="map-link"><a href="#">Search</a>
        </li>
        <li id="list-link"><a href="#">Actions</a>
        </li>
        <li id="locate-link"><a href="#">Locate</a>
        </li>
        <li id="more-link"><a href="#">More</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

to no avail.

I think I'm on the right track - can anyone help?

Thanks Mini



Solution :

Change your css code to this code

@media (max-width:767px) {
    .navbar-inverse .dropdown-menu .radio label
    {
        color: #fff;
        background-color: transparent;
    }
}

    CSS Howto..

    How to create the block with round corners, which consists of three parts: top, content, bottom?

    yui-css grid: how to get a 1/4 - 2/4 - 1/4 grid set up?

    Hiding the content of a
    and showing another
    with different contents

    How can I change the paragraph formatting in the SharePoint RichHtmlField

    Mobile-Friendly CSS - How to hide a sidebar? [closed]

    How to replace inline text with images using CSS

    How to get background image from internal css using xpath?

    How to Get Element From Path Not Class or Id

    How to change the CSS of the active toggle button using pseudo CSS transitions

    CSS: How to target a specific cell inside a table?

    How do i create custom grid class in Bootstrap for lg as well as xs screen size?

    How to cut down HTTP request on js/css in laravel

    How to display a dynamic rating based on css and the value from PHP? [closed]

    How do I position divs inside header?

    How to float images left and right without text wraps

    How can I get the bottom padding of an input working in IE8?

    How can i setup multiple sites within a single ASP.Net project?

    How to change the included CSS files on button click?

    How to exclude last child in css psuedo class selector

    How is designing shape similar to waves with html and css?

    How to Make A Fancy Arrow Using CSS?

    How to override default tag css to normal?

    How to add slide animation when showing elements

    How to sort and combine this css rules so it doesn't repeat so much?

    How to use the word-wrap property in CSS 2.1 and validate CSS

    How to add own icons in bootstrap navbar

    How to get logo to front layer

    How to crop SVG file within HTML/CSS

    How to achieve this diagonal drop down effect with CSS?

    How to load a apply jQuery function upon appending a
    via Ajax?