Example: http://jsfiddle.net/wCFBw/25/
input {
color: black;
}
<input type="text" value="This is black" />
<input type="text" disabled="disabled" value="Why this is not black?" />
I don't know why that happens, but I suspect WebKit is trying to be smart with respect to letting the user know the <input> is disabled.
You can workaround this by also using the -webkit-text-fill-color property:
input.black {
color: black;
-webkit-text-fill-color: black
}
Please, make sure you're setting the colour to something that makes it apparent that the <input> is disabled.
Here's your demo, modified with the new property: http://jsfiddle.net/thirtydot/wCFBw/38/
Related
I have a form input element:
<input type="password" id="password" name="password" class="form-control" size="25" autocomplete="off" required>
I am styling it as such:
.form-control {
background-color: #010101;
&:-internal-autofill-selected {
background-color: #010101 !important;
}
}
But for some reason I'm getting a white RGB color appearing instead of the black background.
When I inspect the element I see the below:
When I click the color style to view wherer it is set it just shows me my CSS above with the dark background color.
Would anyone know where this colour is coming from?
In Firefox, input type="date" brings a calendar popup on click.Apart from preventing the default behaviour on click, I haven't found a way to hide the calendar. I don't want to use type='text' either.
Is there any way to hide this popup calendar in Firefox?
If you prevent the default action for the onClick handler, the popup is not shown on Firefox.
<input type="date" onClick="event.preventDefault()" />
input::-webkit-calendar-picker-indicator{
display: none;
}
<input type="date" />
In Chrome, and in some other browsers, a standard black icon in the form of a calendar is added to the input type date field.
To remove it or change it, we use such a pseudo-selector:
to remove:
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
}
<input type="date" />
to make invisible:
input[type="date"]::-webkit-calendar-picker-indicator {
visibility: hidden;
}
<input type='date'/>
as you probably already guessed, with this pseudo-selector you can do a lot with this calendar icon, for example, even add a red background
input[type="date"]::-webkit-calendar-picker-indicator {
background-color: red;
}
<input type='date'/>
I am seeing potentially strange behavior of web forms when modifying them via CSS.
I have the following HTML code of a simple web form:
.email {
background-color: #FFFEEE;
}
<form>
<fieldset>
<legend>Contact Us</legend>
Name:
<p>
<input class="name" type="text" size="30" placeholder="Name">
</p>
E-Mail:
<p>
<input class="email" type="text" size="30" placeholder="john#doe.com">
</p>
</fieldset>
</form>
Just in case, here is a link to the fiddle: https://jsfiddle.net/sge13t9r/3/
However, as in the picture below, while I only specified a background color, the size and style of the field changed as well. The browser used is Firefox. Can anyone please advise on the reasons for such behavior and how I should go about just changing the background color, without affecting the size and style?
Fiddle Screenshot:
Your name input is definitely getting a default padding from the Firefox browser. What you need to do is specify the padding for inputs and use the box sizing property. This is the CSS you should have:
.email {
background-color: #FFFEEE;
}
input {
padding: 2px;
box-sizing: border-box;
}
Here is what I currently have:
<script>
function colour(x){
document.getElementById(x).style.border = "1px green solid";
}
</script>
<p>Email<span style="color:red">*</span><input type="email" name="email" autofocus required/></p>
<p>Name<span style="color:red">*</span><input type="text" id="fname" name="fname" placeholder="First Name" required onfocus="colour(this.id)"/><span style="color:red">*</span><input type="text" id="lname" name="lname" placeholder="Last Name" required onfocus="colour(this.d)"/></p>
No matter what I do it will focus on the email, can I fix it?
You could fix it, with CSS. Just write some CSS like this.
input:focus {
border:1px solid green;
}
And your input fields are green bordered if they are in Focus. No Need for JavaScript in this case.
You can fix it without JavaScript you have to use border along with outline.
The outline property will disable the browser focus color.
input:focus {
outline: none;
border: 1px solid green;
}
no matter what i do, it focuses on the email
If you want to focus another input field, remove the autofocus property from your email field and add it to the field you want to focus at page load. If you don't want that a field is focused at page load, just remove the autofocus attribute.
I have a text box in html, I have set the text box to disabled,
<input type="text" style="background-color:transparent; text-align:center" disabled="disabled" />
So the text color in this text box is gray, how can I change it to any color I want?
color:xxx and provide some value for the textbox
<input type="text" style="background-color:transparent; color:red;
text-align:center" disabled="disabled" value="some values"/>
work for chrome, firefox, except internet explorer
You can try with css selectors as shown below but as "Sarfarz" mentioned browsers might or might not honor this. But you can test
input[disabled='disabled']
{
...styles
}
It's possible.
input:disabled {
background: #000;
}