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 .
Do the same for anchor tag and buttons ;) .
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 ;) .
awesome !!!
ReplyDeleteAnytime dude :)
ReplyDeletethanks! the first thing of many trys that works!
ReplyDeletei use now:
*{outline:0px !important; -webkit-appearance:none;}
Works for me as well. Thanks
ReplyDelete