If at first you don't succeed, call it version 1.0

Contact Me

Sarvesh Kushwaha
Email : sarveshkushwaha@outlook.com

Total Pageviews

Powered by Blogger.

Sunday 19 May 2013

Remove dotted lines on links , buttons and textboxes's border in Bootstrap


Recently i have used bootstrap as UI framework for my projects . i find one issue , it was giving dotted lines around my text-boxes on Firefox-5 and IE-8. it looks ugly and many people on web already searched the solution . 
1). To fix this quickly for text-boxes, you will have to change a bit in bootstrap.css .Find input[type="text"]:focus  in your bootsrap.css and the you will get this string somewhere below in the bootsrap.css i.e outline : thin dotted \9 . remove just this line and you are done for the text-boxes .




















2). Or overide their CSS by using following code .
 textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus {
    outline:0px !important;
    -webkit-appearance:none;
        }


Do the same for anchor tag and buttons ;) .

4 comments:

  1. thanks! the first thing of many trys that works!
    i use now:
    *{outline:0px !important; -webkit-appearance:none;}

    ReplyDelete
  2. Works for me as well. Thanks

    ReplyDelete