-1

I am trying to disable selection highlighting for input fields using CSS.

input[type="email"]::selection { background: transparent }

fault image

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
ravindu
  • 1
  • 3

2 Answers2

0

The styles that you're talking about are due to AutoComplete.

autocomplete

To change them in Chrome, you can use the following CSS:

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

More details: Change Autocomplete Styles in WebKit Browsers

I am not sure if this is possible in non-WebKit / non-Blink browsers. But this would be a good next step: Override browser form-filling and input highlighting with HTML/CSS.

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • This is working for me`input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-background-color:transparent; transition: background-color 5000s ease-in-out 0s; }` – ravindu Oct 23 '20 at 04:26
  • @ravindu Thanks, hope my answer helped. – Praveen Kumar Purushothaman Oct 23 '20 at 06:47
0

Please try this code, To

just added the style :

.input-text:focus{outline:none;}

I hope this code will be useful for you.

Thank you.

Makwana Prahlad
  • 1,025
  • 5
  • 20