I'm creating a form where once it has been submitted, I want to remove the background colour of the input.
If I use Google Autofill on an input, the background color and color attributes are ignored.
In dev tools it's showing that my styles SHOULD be visible, but they're not.
input:disabled, textarea:disabled, .disabled {
background: #060301;
color: #f0eef3;
}
/* Annoyingly we have to override Chrome styles */
input:-webkit-autofill:disabled,
textarea:-webkit-autofill:disabled,
input:-internal-autofill-selected {
background: #060301!important;
color: #f0eef3!important;
}
It works fine unless autofill was used.
Any ideas?
You can re-set the value of the input field right before disabling it. That will reset Chrome's autofill status.
inputField.value = inputField.value
inputField.disabled = true
The only way to achieve the desired effect - at least visually - with only CSS is to colorize the background using a large inset box shadow rather than setting the background color. The latter is locked by the user agent stylesheet.
Set a background color for all disabled input elements of type="text": You can add the disabled attribute in html and add background.
Reference
input[type=text]:enabled {
background: #ffff00;
}
input[type=text]:disabled {
background: #dddddd;
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>
Related
I have a group of ToggleButtons on my application whose background colors I would like to change. Currently my code gives all the buttons a gradient of <.untoggled-button> and the unselected buttons have that gradient with an added blue film. I have two problems: I want to remove the blue film on the untoggled buttons and I need to access the toggled button to change it's styling. <.toggled-button> is just a placeholder that doesn't do anything right now.
I'm wondering how to access the unchecked and checked versions of the ToggleButtons in my css, as to override the default bootstrap styling!
the jsx:
<ToggleButtonGroup className="view" type="radio" name="options" defaultValue={2}>
<ToggleButton value={1} className="untoggled-button" > title</ToggleButton>
<ToggleButton value={2} className="untoggled-button"> title</ToggleButton>
<ToggleButton value={3} className="untoggled-button"> title</ToggleButton>
</ToggleButtonGroup>
the css (this is very incorrect, but I'm hoping to be able to style both unchecked and checked buttons):
.untoggled-button{
background-image: some gradient !important;
}
.toggled-button {
background-image: another gradient !important;
}
setting the background color to transparent and adding a .active class seems to have worked!
.untoggled-button{
background-image: some gradient !important;
background-color: transparent !important;
}
. untoggled-button.active {
background-image: another gradient !important;
}
Important: I do not want to customize/remove focus styles for accessibility (a11y) purpose. It is basically impossible to mimic all the different focus styles of browsers/operating systems
Customizing the look and feel of an input/textarea removes the outline style when the element is focused. Also it adds weird border etc.
What is the reason behind this behavior, in my opinion it destroys accessibility? How not to override focus styles while modifying simple CSS properties like background, borders color etc?
I tested on Firefox Mac and IE 11 (Chrome works fine), maybe other browser acts the same.
Here is a Codepen to try it in the browser: https://codepen.io/lbineau/pen/dLgwoo
<label for="customized-input">Customized input</label>
<input id="customized-input" type="text" />
<label for="native-input">Native input</label>
<input id="native-input" type="text" />
Expected result: the default outline should be displayed even if the input border is customized.
Actual result: outline does not appear when the input is focused.
I don't know the reason behind this.
But you can override it with the following code:
#customized-input:-moz-focusring {
outline: Highlight solid 1px;
}
If the element css which you want to change is sibling, you can use like this,
<label class="label-class" for="customized-input">Customized input</label>
<input id="customized-input" type="text" />
.customized-input:focus ~.label-class {
&::before {
border:1px solid red;
height:40px;
width: 40px;
}
}
Is there a css way to show a cursor in a transparent input? I keep googling and all that pops up is how to hide it!
<input class='transparent' />
.transparent{
color:transparent;
background:transparent;
}
To be absolutely clear the only thing I want to show up in the input is the cursor, nothing else - i.e. the text should be hidden but the cursor should still be visible.
You could style the text not touching the caret using the text-fill-color feature of webkit.
.transparent{
background:transparent;
color:black; /* sets the color of both caret and text */
-webkit-text-fill-color: transparent; /* sets just the text color */
}
<input class='transparent' />
The feature isn't supported by all the browsers, but the recent versions of the most widely-used browsers do support it.
I managed to solve this using the caret-color CSS property in input, text areas and content-editable divs:
https://css-tricks.com/almanac/properties/c/caret-color/
input,
textarea,
[contenteditable] {
caret-color: red;
}
Keep the color property as transparent for the text.
By default tt-input is transparent, I want to change its background color when on focus to be white, but when I change the color the hint is not shown anymore because it's hidden by the new color.
How can it be changed?
The background-color: transparen has been set as an inline style with javascript.
You should overwrite it by using !important.
for <input class="typeahead" type="text" placeholder="States of USA"> you should use:
.typeahead.tt-input {
background-color: black !important;
}
Also see: https://github.com/twitter/typeahead.js/issues/677
i have the following problem with that code in my html tag:
<div id="searchbar"><input name="searchbar" type="text" id="searchfield" value="some text" onfocus="
if(this.value==this.defaultValue)
this.value='';
this.style.color='#11111'"
onblur="
if(this.value=='')
this.value=this.defaultValue;
this.style.color='#22222'
if(this.value==this.defaultValue)
this.style.color='#111111'"
okay, the main goal is to approve that in my searchfield where the standard value is given with "some text" should change color for only new entries.
that message "some text" will disappear on click into it. now, the new value should change its color from standard #222222 to #111111. second, when leaving this field there have to be two different ways to look at. the first possibility should be that if the new value is different from the standard one with "some text" the color should stay on #222222. second possibility would be if the new entry is the same like standard value or even no entry was made then the color should change back to the default one to #222222. so the code above works up to the last point.
if there is someone who could give me advice on how to solve that i really would appreciate. thanks a lot.
you can use the :focus pseudoclass
css on focus change the css as like this
Css
input[type="text"]{
color:white;
background:red;
padding:5px;
}
input[type="text"]:focus{
color:black;
background:yellow;
}
Live demo http://jsfiddle.net/VQ99D/
More info http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/
Instead of your long complicated code just use HTML5 placeholder
Jsfiddle Example
HTML
<div id="searchbar">
<input name="searchbar" type="text" id="searchfield" placeholder="Some Text" />
</div>
CSS
#searchbar input {
color: green;
}
input::-webkit-input-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
Change the color according to your wish.
Note: Placeholder will not support in IE.
UPDATE
If you wants to use a placeholder to support all browsers use this placeholder--a jQuery plugin and tweek the style.css in it to achieve your result.