I'm working with AngularJS to set image buttons disabled/enabled.
My css selector to show them transparent isn't working.
I've started with a try it that selects a disable on an input element and there it does indeed apply the css, but not in case of my div elements.
I've added my div elements that don't work, resulting in the following code:
<!DOCTYPE html>
<html>
<head>
<style>
input:enabled {
background: #ffff00;
}
input:disabled {
background: #dddddd;
}
div:disabled {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<div disabled="disabled">should be transparent</div>
</body>
</html>
The disabled is getting added/removed for my AngularJS html elements. So how do I get the css to apply to a div with disabled added to it?
Note: I know it's possible to duplicate the elements, use ng-if to show/hide them and apply the transparency to it with a class, but that's very ugly.
:disabled pseudo selector will work only for input elements. For div, use div[disabled] to apply css
Use
div[disabled] {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Demo
input:enabled {
background: #ffff00;
}
input:disabled {
background: #dddddd;
}
div[disabled] {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<div disabled="disabled">should be transparent</div>
Select all disabled input elements (such as input, textarea, select, option, radio, checkbox, button) :
*:disabled{
//enter code here
}
Select all other disabled elements (such as div, section, p, etc):
*[disabled]{
//enter code here
}
Use the attribute selector [attribute='value'], which will work on all types of elements, compared to the pseudo-class :disabled, which only works on form elements
And in your case, where the attribute disabled doesn't have a value, you can omit it [disabled]
Note, when not using the value part in the selector, it will target elements both with and without, but as you can see the with last CSS rule, where the value part is used, it won't.
Stack snippet (here I used it on all, but you can of course keep :disabled for the input's)
input:not([disabled]) {
background: #ffff00;
}
input[disabled] {
background: #dddddd;
}
div[disabled] {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
div[disabled='disabled'] {
color: red;
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<div disabled>
should be transparent, but doesn't have red colored text
</div>
<div disabled='disabled'>
this will both be transparent and have red colored text
</div>
For a div element you should use div[disabled="disabled"] or div[disabled]
its not an input element where you can apply :disabled
You can use div[disabled="disabled"] to select disabled div.
See Below Example :
input:enabled {
background: #ffff00;
}
input:disabled {
background: #dddddd;
}
div:disabled {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john#doe.com" name="usremail">
</form>
<input disabled/>should be transparent
And aslo See this :
I would try:
*:disabled, *[disabled]{ /* ... */}
Example
*:disabled,
*[disabled] {
background: #000;
}
<input type="text" value="foo" disabled />
<input type="text" value="bar" />
Using the :placeholder-shown attribute on an input tag, selects the state when the placeholder text is visible. This works as expected on Google Chrome with text input boxes and number input boxes.
Google Chrome:
Firefox seems to ignore this property when used on an <input type=number> field
Firefox:
Question: Why does this occur and how can it be overcome?
Demo snippet
input:placeholder-shown {
background: #000;
}
<input placeholder="example">
<input placeholder="example" value="12345">
<br>
<input placeholder="example" type="number">
<input placeholder="example" type="number" value="12345">
The :placeholder-shown is not supported in firefox on type="number", type="time", and similar.
Here is the refrence
But you can work around it by using ::-moz-placeholder
See code below:
input:placeholder-shown {
background: #000;
}
input::-moz-placeholder {
background: #000;
color: #ddd;
opacity: 1;
}
<input placeholder="example">
<input placeholder="example" value="12345">
<br>
<input placeholder="example" type="number">
<input placeholder="example" type="number" value="12345">
I just want to know how to change the color of placeholder text in my html page.
I used
::-webkit-input-placeholder { color:red; }
It works, but changed the placeholder text colors in my whole page. So let me know if there is any way which we can specify the placeholders or input in html, so that we can change the place holder text color of desired area only.
try this code
.fname::-webkit-input-placeholder {
color: red
}
<div class="content">
<input type="text" name="firstname" class="fname" placeholder="placeholder">
</div>
<input type="text" name="lastname" class="lname" placeholder="placeholder">
or may be can use
.content ::-webkit-input-placeholder {
color: red
}
It will change placeholders only for Chrome. To get individual styles try this CSS instead:
.changed::-webkit-input-placeholder{
color: red;
}
.changed::-moz-placeholder {
color: red;
}
.changed:-ms-input-placeholder {
color: red;
}
<input type="text" class="changed" placeholder="Changed placeholder">
<input type="text" class="original" placeholder="Original placeholder">
I am working on a site and have a Google CSE input that works fine, except the input field text does not display properly in Firefox. It looks fine in Chrome and Safari. But is absolutely microscopic in FF. The input field is in the upper right corner of the page.
Here is the code:
<form action="http://dev.rouviere.com/search-results/" id="cse-search-box">
<div>
<label for="q">search</label>
<input type="hidden" name="cx" value="017425724926122041548:nrhzbynfo9u" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" autocomplete="on" size="31" style="font-size: 13px; color:#797979;" />
</div>
</form>
Here is the CSS:
form input#q {
height: 20px !important;
font-size: 13px !important;
color: #797979;
float: right;
margin-top: 5px;
}
Note on the inline styling. Because Google applies some styling and my css styling was not having effect, I added the inline styling as well.
It's not rendering microscopic, it's being hidden by your padding/input height.
If you change the following rules it should work:
input#q {
height: 25px !important;
...
}
form input {
padding: 5px 2% !important;
...
}
Although I would suggest restructuring your css to avoid having to use !important everywhere and being more specific about what you're trying to select in your rules.
How to create a input box that with 2 parts that 1st part not editable with default text and rest of that editable by user.
<input type='text' value='read only'><input type='text' value='editable>
Mix 2 input in 1 input.
You can try mix two inputs to look like one as #DoeNietZoMoeilijk proposed.
You can achieve it by HTML and CSS, try this:
HTML:
<input type="text" value="Read only" id="first" readonly="readonly" />
<input type="text" value="Editable" id="second" />
CSS:
#first {
border-right: none;
}
#second {
border-left: none;
margin-left: -5px;
}
Here is example in jsfiddle
And here is example snippet:
#first {
border-right: none;
}
#second {
border-left: none;
margin-left: -5px;
}
<input type="text" value="This is read only part" id="first" readonly="readonly" />
<input type="text" value="Editable" id="second" />
You can't really mix two inputs in one input, of course, but using CSS you should be able to make two inputs look like one. Setting the readonly attribute on the first input renders it... well, read-only.