CODEWITHSUNDEEP
htmlcss
Linto
Linto

Reputation: 1282

How to remove yellow border comes around the textbox in Chrome & Safari

i have a html page.While i take the page in chrome or Safari , there is a yellow border around the text box.

For removing the border,i have added 

<style type="text/css">
  input{
  outline:none;
}
</style>

And the border has gone.

But while i take the page in Mac machine (chrome & Safari).it still there. Anyone have idea of how to fix it in Mac?

Upvotes: 5

Views: 11175

Answers (3)

jimesilverman
jimesilverman

Reputation: 1

if you're using bootstrap's CSS, it's likely the culprit. find the problem here:

select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

if you cannot edit the bootstap.css use this, works like a charm.

select:focus, input:focus, textarea:focus {
  outline: 0;
  outline-color: transparent;
  outline-style: none;
}

Upvotes: 0

Mark
Mark

Reputation: 6864

You can try setting it too no color:

.foo:active, .foo:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Upvotes: 0

coderabbi
coderabbi

Reputation: 2301

:focus {
  outline: 0;
  outline-color: transparent;
  outline-style: none;
}

Upvotes: 12

Related Questions