CODEWITHSUNDEEP
cssinputfocusbackground-color
Elena
Elena

Reputation: 29

how to change the background-color property of input[type="text"]:focus?

So yes I know how to change it but somewhat it does not work - or works just halfway. Here is the picture illustrating the situation - where you can see that i pointed out background-color but somethnig rewriting the property and it is not clear what exactly.[was trying to incert screenshot where rewriting is clear but not shows where or what rewriting it] so here my css(scss). will apriciate any help

.searching-form input[type="text"] {
    padding-left: 15px;
    width: 100%;
    height: 36px;
    color: $white;
    font-size: 14px;
    background-color: $dark-text;
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 1.6);
}

.searching-form input[type="text"]:focus {
    color: $white;
    background-color: $dark-text;
    outline: none;
}

]1

Upvotes: 1

Views: 416

Answers (2)

Elena
Elena

Reputation: 29

the solution is rewrite these rules (well, it is just for webkit browsers but any way) thanks also to this post How to avoid "-internal-autofill-selected" style to be applied?

/* 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;
}

Upvotes: 1

Mamun
Mamun

Reputation: 145

I think you used any kind of library where to override your CSS. You can use

color: $white !important;
background-color: $dark-text !important;

to prioritize your CSS.

Upvotes: 0

Related Questions