I am not at all getting how to use more advanced css-selectors like + or >
But as I am now needing it to prevent too much JS, maybe someone can help me out with this particular situation of this block:
<section class="rf_re1-suche_container">
<input type="search" placeholder="Your search">
<button>Send</button>
</section>
and I wanna do that:
.rf_re1-suche_container input:focus{
background:orange;
}
but also for the button. So: If the input has a focus I want the input AND the button to have the same background. How would I do that? Thanks!
You will need to target the input and the button separately. Because you want this to apply only when the input has focus, you will need to repeat the entire selector including the input:focus portion, then use a + combinator to link the button to the focused input:
.rf_re1-suche_container input:focus,
.rf_re1-suche_container input:focus + button {
background: orange;
}
<section class="rf_re1-suche_container">
<input type="search" placeholder="Your search">
<button>Send</button>
</section>
Just add the selector for the button, separated with a comma:
.rf_re1-suche_container input:focus,
.rf_re1-suche_container input:focus ~ button {
background: orange;
}
The tilde (~) is the general sibling selector. It selects the element ONLY if it is preceded by the element before the sibling.
This is by the way quite similar to the adjacent sibling selector, but with the latter the two elements need to be right behind eachother. In your case it doesn't really matter, as these two elements are the only one in the parent.
Related
How do I use the :checked css for my radio buttons with hidden input buttons?
http://cormilu.com.br/loja/sem-categoria/test-2/
I've tried:
input[type=”radio”]:checked{ color:red; … }
input[type="radio"]:checked+label{ color:red; … }
label > input + img{ color:red; … }
label > input:checked + img{color:red; … }
Is it because of my page setup? Ihid the input radio buttons and replaced them with images.
Thanks for your help.
Cheers,
Amir
The problem is that you can't target the image or the label which you had replaced the radio button with.
You can either:
1) Use JavaScript to change things (targeting parentNode) upon radio button click/change
2) Change the HTML markup if it is able to solve your problem, and apply CSS:
Move the <img> tag after the <input> and use the CSS sibling selector (+):
HTML:
<label class="hideradio-vars">
<input type="radio" value="20-bolas-fio-de-3m" id="pa_kit" name="attribute_pa_kit">
<img src="http://cormilu.com.br/cormilu-content/uploads/2015/04/free1.png">
20 Bolas Fio de 3m
</label>
CSS:
.hideradio-vars input[type="radio"]:checked + img {
/* Your rules here */
}
Unfortunately you cannot target the parent with CSS, so you might want to look into JS/jQuery or to revise your HTML markup entirely.
I've done this, this , and this but gives me no luck. I'm trying to change the color of a div when the lower element is being hovered but I can't do it. I have this HTML structure like so:
<div class="ms-parent">
<button type="button" class="ms-choice"></button>
<div class="ms-drop"></div>
</div>
Here is what I've tried so far:
.ms-parent:hover,
.ms-choice:hover + .ms-drop,
.ms-drop:hover,
.ms-choice:hover,
.ms-drop:hover ~ .ms-choice{ color:#000000!important; background: #ffffff; }
So when .ms-drop is being hovered I want .ms-choice to change its style. What I'm missing here?
There is no Upper/previous element selector in CSS. You can select next immediate sibling element using + and you can select all the next siblings element using ~.
Kindly note it down, I mentioned next, because there is no previous selectors right now. Hopefully that will introduce on CSS4. You can use jquery to achieve this. Otherwise if you want to do it in CSS, you need to change the HTML structure like below.
<div class="ms-parent">
<div class="ms-drop"></div>
<button type="button" class="ms-choice"></button>
</div>
Now you can target it like below.
.ms-drop:hover ~ .ms-choice{ color:#000000!important; background: #ffffff; }
Or
.ms-drop:hover + .ms-choice{ color:#000000!important; background: #ffffff; }
DEMO
I am trying to style a search input box, such that, when the user, click into the box, it changes to a different color, and to get rid of the blue outline that indicates that the user has selected the text box.
Any suggestions or ideas? Thanks.
jsFiddle: http://jsfiddle.net/7t5AY/
HTML:
<input type="text" id="text-search" placeholder="Search" >
You can use the :focus selector, e.g:
Demo Fiddle
input[type=text]:focus{
outline:none; /* removes the blue outline on focus */
background:lightgrey; /* however you wish to style */
border:1px solid black; /* however you wish to style */
}
Or more stylishly..
Note that in HTML5, input type="search" is a valid designation
I am using Bootstrap 3 and am trying to make it so that the entire form (input field AND button), change the border color on focus. Meaning, if I click in the input field, the entire border of the button should also change colors, not just the border of the input field. Does that make sense?
Here is the code:
<form class="form-inline" role="form">
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</form>
and the CSS:
.form-control:focus {
border-color:#1ABC9C;
box-shadow:none;
}
The problem with that is ...it just changes colors of the input field, not the button, unless someone clicks the button. How do I make it change colors for both at the same time?
Fiddle: http://jsfiddle.net/CbGpP/
Use the adjacent sibling selector so your CSS looks like this:
.form-control:focus, .form-control:focus + span .btn{
border-color:#1ABC9C;
box-shadow:none;
}
It's supported in all major browsers including IE7+.
Here it is working: http://jsfiddle.net/CbGpP/2/
You have to be a little hacky if you're not using JS, so this won't be flexible if you change your layout, use with caution.
.form-control:focus,
.form-control:focus + .input-group-btn > .btn {
border-color:#1ABC9C;
box-shadow:none;
/* outline: 5px solid red; */
}
You could use ~ in css to hover over one element and select another. You could also remove the left and right border of either element so they look like one.
DEMO http://jsfiddle.net/kevinPHPkevin/CbGpP/4/
.form-control:focus ~ span .btn{
border-color:#1ABC9C;
box-shadow:none;
border-left: #ccc;
}
I am working on my website so it look and work almost the same even if JavaScript is disabled, So i have a INPUT and TEXTAREA tags when JavaScript is enabled i can focus my mouse on the INPUT and the TEXTAREA style become display: block from display: none, Is there a way to check with CSS if the user is focus on the INPUT tag and then apply some styles to the TEXTAREA tag?, Thank you all and have a nice day.
If you have the textarea after the textbox than yes, you can use + adjacent selector
textarea {
display: none;
}
input[type=text]:focus + textarea {
/* Switching styles for textarea when textbox is focused*/
display: block;
}
Demo
Note: Add a class to input[type=text] for selecting specific
element, else the above selector will trigger all textarea and
input[type=text] elements
You can use an adjacent selector like this:
JSFiddle Demo
HTML:
Click on the text input
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
CSS
input[type=text]:focus {border:1px solid red; }
textarea { display:none; }
input[type=text]:focus + textarea {display:block; }
Though you will notice that you can't actually click and focus on the textarea when it appears.
Yes, you can do it with CSS using Pseudo-classes
Example for :focus
To avoid hiding the textarea after focusing on input use the following:
textarea:hover,textarea:focus{
display:block;
}
See the demo here.