How can I change this purple color behind my input field? I already tried with background-color or with :hover but nothing happens. This is a CORE UI Admin Template and it's main color is purple but I want it to change with my own color?
.yourclass:focus {
border-color: green;
box-shadow: 0 0 10px green;
}
Though, you should probably find and change box-shadow and border-color colors in the original CSS file. You can use "inspect element" to find where it is.
You can use the input[type=text]:focus{box-shadow: 2px 2px 0px #cccccc;} for changing the color
it looks like outline! Try:
.yourclass{outline: unset!important;}
Or
.yourclass:focus{outline: unset!important;}
Related
See the Example image
I am using the primeng component in my application it has css class p-component. Whenever I click on any field whether it is button or input or any other field It got highlited with blue color border. I don't need that So I tried to use outline:none but it doesn't work out.
Apply the following CSS to remove auto highlited blue color
input:focus {
box-shadow: none !important;
}
It'd be good if you can post your code so that we can get a 100% correct answer to you. However, looking at PrimeNG's website it seems as though the .p-inputtext:enabled:focus selector is setting the following
box-shadow: 0 0 0 0.2rem #BFDBFE;
border-color: #3B82F6;
So add a rule to your own css below the linked PrimeNG css file with the following rule
.p-inputtext:enabled:focus {
box-shadow: none;
border-color: initial;
}
I can check this for you if you post up your code, though.
I'm using antd input like this
How to change the grey color to white color.
I tried changing on the input tag:
background-color: white !important;
but it doesn't work
This is because of autocomplete, which sets a blue background on these elements. You can use a quick hack to fix this, using an inset box-shadow:
input:-webkit-autofill {
box-shadow: 0 0 0 9999px #fff inset;
}
Would like to ask if that happened when the input is focused? Can you try this
input[type=password]:focus {
background-color: white;
}
This looks like a style when the input is selected.
Try to :focus
Your screenshot looks like password field was filled by autocomplete.
If my guess is right, please head to this link and this link.
I'm really stuck with finding where I can override the bootstrap control for auto-complete background color of a form-control to something other than white as it does not look good for my dark theme.
Input Control - Background color goes white after entering a input value using auto complete:
This is no good, needs to the gray colour
I was also getting a similar behavior for a select (dropdown box), after selecting an item from the list, the background was going white as you see in the image below:
I did find a solutoon for the select dropdown list which is to overrride Bootstrap with custom CSS, see below:
select.form-control:focus::-ms-value {
color: #ffffff; /* Set text to white for selected item */
background-color: transparent; /* remove background color for selected item*/
}
I am still however looking for a solution in changing the default background color for autocomplete from white to the gray color of my theme, thx
The background on autocomplete in chrome is inherited from Webkit. To address this field try to use:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
-webkit-text-fill-color: green;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
-webkit-text-fill-color: green;
}
You can change white for background color and green for your desired font color.
Testing on Chrome, this is the rule that applies on text inputs when autocompleting:
input:-internal-autofill-selected {
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
You could try changing that to your own styles and see if it works.
Is there any way to change that blue border line of the dropdown box to something else?
According to this answer it cannot be changed with CSS, as it is rendered by the operating system:
(source of the picture is the linked answer on SO)
You can only change the border and the outline of the select box itself.
#Joshua,
Did you try this
.input:focus {
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
Find it here
Is there a way to custom style/remove the yellow autofill background-color that Google Chrome add to input boxes with autocomplete="on"?
I found some solution out there, but they all remove the autocomplete feature or add an inset shadow to cover the yellow.
But i need to retain the autocomplete feature and use a custom background (linear-gradient) for the input.
Edit: I tried to override the stylesheet, but it isn't working, it might be a Chrome bug?
input:-webkit-autofill {
background-color: red !important;
}
Use the following code:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;}