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;
}
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?
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;
}
http://jsfiddle.net/leongaban/6vwLetd6/13/
I have a custom sign up form with styles from a Codrops demo page.
Basically on hover I want to animate the label text (have it fade in and out) but for now just trying to get the text to change color to red:
.input__label-content--jiro:hover {
color: red !important;
}
<span id="full_name_label" class="input input_jiro">
<input class="input__field input__field--jiro" type="text" id="input-1" />
<label class="input__label input__label--jiro" for="input-1">
<span class="input__label-content input__label-content--jiro">
Full Name
</span>
</label>
</span>
However when you hover over "Full Name" the color doesn't change. Can you see what is blocking the hover effect?
I've removed pointer-events: none declaration and it works.
Take a look at JSFiddle.
So I think You only need to overwrite this one according to auto value => Docs
Is this what You want??
Basically in the form when you click on the image, it should also check the box. This works in in all browsers but IE7 and IE8. Anyone have any ideas?
<form>
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>
<p align="center"><label for="interest1"><img src="/images/interest1.jpg" width="152" height="152" alt="" /></label>
<label for="interest2"><img src="/images/interest2.jpg" width="152" height="152" alt="" /></label>
<label for="interest3"><img src="/images/interest.jpg" width="152" height="152" alt="" /></label></P><!-- code making checkbox be an image-->
</form>
It seems that IE < 9 doesn't like subnodes (non-input) in a label. A workaround is to set the images as the background of the label and making the label be inline-block so you can set its size. Tested in IE8 http://jsfiddle.net/K9FEk/8/
CSS
label {
border:1px solid red;
display:inline-block;
}
#label-interest1 {
background-image: url(http://www.gravatar.com/avatar/36fa212d5215d9f282033375834ba0c0?s=120&d=identicon&r=PG);
width: 152px;
height:152px;
}
HTML
<form>
<input type="checkbox" name="interest1" id="interest1" value="x">
<p align="center">
<label id="label-interest1" for="interest1"></label>
</p>
</form>
Not sure what the problem is but this CSS made it work for me in IE8 and IE7 mode using IE9.
label {
display:inline-block; /* "block" would also work */
}
img {
position:relative;
z-index:-1;
}
Demo: http://jsfiddle.net/K9FEk/3/
It may be because the image's space on the page was expanding out of the display:inline styled <label>, or that it was "above" the label, hijacking the click event.
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/