I would like to change opacity of image only when it is in disabled state like i'm doing for input button below:
input[type="button"]:disabled {
border: 1px solid #AAA;
border-radius: 4px;
opacity:0.5;
}
img:disabled {
opacity:0.5;
}
Normal button: <input type="button" value="Close" /><br>
Disabled button: <input type="button" value="Cancel" disabled="true"/>
<br><br>
Normal: <img src="http://i.stack.imgur.com/AkfB4.png" /><br>
Disabled: <img src="http://i.stack.imgur.com/AkfB4.png" style="opacity:0.5" disbled />
But it's not working for images, if I add :disabled in css. Please help me to get this.
As stated by W3C:
An element is said to be actually disabled if it falls into one of the
following categories:
button elements that are disabled
input elements that are disabled
select elements that are disabled
textarea elements that are disabled
optgroup elements that have a disabled attribute
option elements that are disabled
fieldset elements that have a disabled attribute
Note: This definition is used to determine what elements can be focused and which elements match the :disabled pseudo-class.
So, you should not use :disabled for images. You should to find some other way.
The best possibility should be to use an input tag with the type attribute image.
This way to can make use of the disabled attribute:
input[type=image]:disabled
{
opacity:0.5;
}
<input type="image"
src="http://i.stack.imgur.com/AkfB4.png"
border="0" disabled />
If you don't want the a form to submit when you click it, you should add onclick="return false;" to the input tag.
Another possibility as mentioned by #DevonBernard is to add a class disabled, and use CSS to get the opacity right.
img.disabled
{
opacity:0.5;
}
<img src="http://i.stack.imgur.com/AkfB4.png"
alt="Image" class="disabled">
If you do want to use the disabled attribute (even though you shouldn't) , another possibility is to use the attribute selector by using:
img[disabled]
{
opacity:0.5;
}
<img src="http://i.stack.imgur.com/AkfB4.png"
alt="Image" disabled>
This is not the correct way, since the disabled attribute should not be used on images in the first place. Also some browsers might not support this (now or in the future).
CSS3 :disabled selector is usually used on form elements (checkboxes, buttons, etc), so if you want to apply opacity on img, you should use:
img.disabled
{
opacity:0.5;
}
So it is about the CSS class. I don't think I have an idea what could "disable state" on image mean actually, perhaps only an image state after you clicked it, but even in that case you can't go with "disabled" selector.
You can also use the CSS selector for "disabled" state, which works fine in my case:
button[disabled] > img {
opacity: 0.5;
}
Best
Manuel
Related
<input type="submit" data-id="TaskStatus" class="PlayPause" id="TaskStatus" onclick="PauseChange();" value="⏸" >
how can I remove the colour from this emoji so that the CSS can allow it to blend in with the rest of the button? it already has CSS applied to it, but that changes the colour when it's clicked, but I'd want it to be the colour chosen in the CSS by default. I've tried to directly style the input but that doesn't seem to work.
You can apply filter: grayscale(100%) to make the emote black and white:
input {
filter: grayscale(100%);
}
<input type="submit" data-id="TaskStatus" class="PlayPause" id="TaskStatus" onclick="PauseChange();" value="😊">
.PlayPause {
filter: grayscale(100%)!important;
}
<input type="submit" data-id="TaskStatus" class="PlayPause" id="TaskStatus" onclick="PauseChange();" value="😊">
Adding to the answer given by Spectric if custom CSS is not getting applied, then you just need to add '!important' keyword at the end of CSS value, to give higher preference to your custom CSS.
I have a form that is structured similarly to the one below. How do I use CSS to style the input[type=submit] element when the input[type=text] is focused?
For example:
<form id="example">
<input type="text" name="search">
<input type="submit" value="Search">
</form>
<style>
#example > input[type="text"]:focus {
// please style input[type="submit"]
}
</style>
I'm trying to accomplish this because a wordpress theme has a search form with the search input and submit button inline. When a user focuses on the input, I want the input field and submit button to have the same border color change.
Alternatively, I could style the entire div around the input and submit button, but then we come back to the problem of styling another element when one element is focused.
Is this even possible with CSS3 or would I have to resort to a javascript function? (Last resort.)
If the structure in your actual code is the same as what you've posted in question, you can use + (adjacent) selector to select the submit button when there's focus on text input.
This is the selector you're looking for: #example > input[type="text"]:focus + input[type="submit"]
To read more about + selector, this answer to "What does the “+” (plus sign) CSS selector mean?" explains it in a short manner and even covers browser support.
Here is a snippet to show it in action. Doesn't look too pretty, but does the job :)
#example > input[type="text"]:focus + input[type="submit"] {
background: gray;
}
<form id="example">
<input type="text" name="search">
<input type="submit" value="Search">
</form>
Here is a way using JQuery, see fiddle https://jsfiddle.net/t33rdra6/2/
$(document).ready(function() {
$('input').blur(function() {
$('input[type="submit"]').removeClass("focus")
})
.focus(function() {
$('input[type="submit"]').addClass("focus");
});
});
HTML Element:
<p> <input type="button"> id="edit" value="edit page" /> </p>
This div has been hidden with display:none , I want to toggle the visibility to display:normal.
#Html.EditorFor(
modelItem => model.user,
new {
htmlAttributes = new {
# class = "user"
}
}
)
The class 'user' has the following properties:
.user {
width:200px;
margin-left:3px;
display:none;
}
For some reason my checked CSS isn't working:
#edit:hover + user {
color:black;
}
#edit:checked + user {
display:normal;
}
JSFiddle Example : https://jsfiddle.net/gp7pyssu/
I don't want to use any Javascript to toggle visibility, I'd like it to be done in pure CSS3.
Several CSS issues here:
display value
In CSS, there is no normal value for display.
Use block, inline or another value that fits your needs : http://www.w3.org/wiki/CSS/Properties/display
+ selector
To use the + selector in your CSS, you have to have your div just after your input, so you have to remove the p surrounding the input: http://www.w3.org/wiki/CSS/Selectors/combinators/adjacent
:checked selector
The selector :checked is only available for radio and checkbox input, you can't use it with a button input: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:checked
With all that, you can check this working JSFiddle
<p> <input type="button" id="edit" value="edit page" /> </p>
#edit:checked + user {
display:block;
}
Have a look
I have this plain submit button appearance in my html code
<input type="submit" name="pay now" value="pay" />
I wish to make the submit button look like this
<img src="images/shopping-cart/check-out-btn.png" border="0" />
but should stick with its submit type
how to do that ?
You should use CSS for that:
input[type="submit"] {
background: url(images/shopping-cart/check-out-btn.png);
width: 200px; /* width of image */
height: 50px; /* height of image */
border: 0;
}
You should probably use a more specific selector though.
A nice way to do this is using the button element.
<button type="submit"><img src="images/shopping-cart/check-out-btn.png" border="0" /></button>
It works just like a regular input with type=submit, but you have much more freedom.
You can make an image into a submit button by setting the type attribute of the input element to image:
<input type="image" src="/path/to/image.png">
For more information, read the image Button State section of the HTML specification.
Can we add space between the browse button and textbox for input type file ?Is that possible? Aslo can i add border color for the same textbox ?
thanks,
michaeld
Increasing spacing is not possible. Generally speaking, styling an input type="file" is extremely difficult. If you check cross-browser, you can see that different browsers render it differently. The only way to style it is to fake another element as input type="file"
Example: http://www.quirksmode.org/dom/inputfile.html
You should use css to do this:
Your html:
<input type="text" class="yourclass" name="yourname" />
<input type="submit" />
your css:
<style> input.yourclass { border:1px solid red; margin-right: 10px;} </style>
Hope this puts you in the right direction
It is working for me in Chrome.
input.file {
text-indent: initial;
}