SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    Web
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change styles of Bootstrap Hover & Fieldset effect

    I am using twitter bootstrap and my own CSS to achieve something.

    What I want to do is, all the input fields like username, password & search, on selecting them, the border becomes blue, I want to change it to black.

    Another thing is, I am using the navbar inverse. It has dropdowns. When I click the dropdown and hover over the list of elements, it is in blue color by default. I am trying to change that hover thing to black color too. How do I achieve this?

    Now these are the things I've tried. I tried inspecting with the firebug element and it always shows something in the bootstrap.min file. However I can't find anything related to hover there and I'm a bit weak when it comes to the transition things although I am not sure if it is related to transition. Another thing I did is, I I edited the value #08c to #000 from the variables.less file and compiled it and obtained a bootstrap file which contains the changed values but still the default color only shows.

    Please help me achieve these effects.

    Thank you!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    This should be pretty easy, but it's harder without a link, so if you can link to your site, that would be good. Changing the form border is to do with this:

    Code:
    input:focus {outline: color here;}
    In Firebug and Chrome dev tools, you can click a button to show the :hover, :focus etc. styles, which is very handy.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    It would be helpful if you could post a link to the page you are working on. If that is not possible, perhaps you can post the html and css in "code" boxes in a message. Since there are probably several css files, the link would be best.

    Ninja'd by Ralph

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Location
    Web
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just did what Ralph partially said. I just added these and achieved what I wanted to.

    Code:
    input[type=text], input[type=password] {
          font-size:14px;
          border:0.7px solid #ccc;
          background: white;
          padding: 4px 6px;
          line-height: 20px;
          height: 20px;
          width: 160px;
          border-radius: 4px;
          
    }
    input[type=text]:focus, input[type=password]:focus{
          border-color:black;
          -moz-box-shadow: 0px 0px 6px #dfdfdf;
          -webkit-box-shadow: 0px 0px 6px #dfdfdf;
          box-shadow: 0px 0px 6px #dfdfdf;
    }
    
    .dropdown-menu > li > a:hover {
          color:white;
          background:black;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •