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
Related
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");
});
});
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
I want to target a div when a checkbox is checked. Can anybody tell me how can I target an outer div when checkbox is checked?
if($('.checkboxClassName').checked) {
$(this).parent();
}
It will target the parent div that the checkbox is inside, you can use more .parent() if tour target is not inside the same parent.
example: if your code is like this:
<div class="container">
<div class="target"></div>
<div class="parent">
<div class="checkboxDiv">
<input type="checkbox">
</div>
</div>
</div>
and you want to target the div.target you'll need the code like this:
if($('.checkboxClassName').checked) {
$(this).parent().parent().parent().find(".target").css('background','magenta');
} else {
$(this).parent().parent().parent().find(".target").css('background','cyan');
}
those parents will work like this: $(this).parent() = targeting div.checkboxDiv
$(this).parent().parent() = targeting div.parent
...
Note how this jsFiddle highlights the usage in a very simple way:
A check box is focused upon (checked).
The CSS style :checked catches this occurrence and applies a CSS style to the div contents.
The div can be another element you want, just make sure you play around with the code and adapt it to your needs. Let us know if you need any more help!
Source: :checked
HTML
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
CSS
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
Edit: I thought you would like a reference to 'how' CSS works here:
Attribute Selector by value
Element plus Element
...and in general CSS selectors
Small question but, cannot find method to solve this little problem. I have html form
<div id="todolist">
<span class="add-on">OK</span>
<input class="addtodo" placeholder="New todo task" name="TITLE" type="text" >
</div>
in CSS
#post-todo span{
color:#aaa;
}
I want to change color:#333 when focused on input,
how do this?
use CSS:focus selector
something like below.
input:focus
{
background-color:yellow;
color:blue;
}
For suppose your OK span would be placed after the input then the below code will work without the help you of the jQuery. Only the CSS will do the trick.
<div id="todolist">
<input class="addtodo" placeholder="New todo task" name="TITLE" type="text" >
<span class="add-on">OK</span> <!-- span must be after input-->
</div>
.addtodo:focus + .add-on
{
background-color:yellow;
color:blue;
}
The + in the CSS is used to Matches any element immediately preceded it by a sibling element.
Consider
E + F
{
// code
}
Then Matches any F element immediately preceded by a sibling element E.
Here is the Demo http://jsfiddle.net/UxZXN/
Unfortunately it is not possible with pure css to change the span styling when focussing the input. Using the :focus selector works only for child elements of the focused one.
But there is a fairly simple javascript jquery method :
$("#post-todo .addtodo").focus(function(){
$("#post-todo .add-on").css("color", "#333");
})
$("#post-todo .addtodo").blur(function(){
$("#post-todo .add-on").css("color", "#aaa");
})
See here: http://jsfiddle.net/BEeNa/
It finally become possible, just a few years later...
It is possible with support of :focus-within.
#todolist:focus-within .add-on { color: #aaa; }
<div id="todolist">
<span class="add-on">OK</span>
<input class="addtodo" placeholder="New todo task" name="TITLE" type="text" >
</div>
I am trying to change the way a submit button looks - i am unable to us id or class or anything like that.
i have a div - inside this div 2 inputs 1 is a text the other is submit let say the div's class is holder.
<div class="holder">
<input type="text" name="somename" value="somevalue">
<input type="submit" name="submit" value="save changes">
</div>
my current css is:
.holder input, textarea {
width:250px;
}
However for this change both input types. and i am trying to change them individually.
You can specify the specific attributes required for css properties:
.holder input[type=submit] {
width:250px;
}
Reference: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Basically, it means that the width property only applies to <input> tags inside the #holder container IF the type attribute has a value of "submit".
You can also use this on the name attribute:
.holder input[name=submit] {
width:250px;
}
The selector for the submit input would be:
.holder input[type="submit"]
Note that your div has a class of "holder", not an id of "holder", so use . not #.