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.
Related
I have an anchor that links to an element using data-attributes for which need special styles when targeted.
My logic
span[data-anchor="my-data"]:target {
/* styles */
}
anchor
<span data-anchor="my-data">My Data</span>
I'm using Shortcodes Ultimate (WP)
https://gndev.info/shortcodes-ultimate/
:target works on the currently active anchor
it doesn't really need a selector
try something like this:
html:
anchor
<span id="my-data">My Data</span>
css:
:target {
background-color: red;
}
see a working example here-
https://jsfiddle.net/0fkh8n09/
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.
I have a form that is display:none and when I am going to hover on a another link, then the form comes up. How can I put the cursor into the input field? Is there a way to do it in css?
If I make the form to display:inline-block directly, the cursor is in the input field.
My CSS:
.search-bar {
display: none;
}
#main-nav a:hover .search-bar {
display: inline-block;
}
My Form in the html file:
<input id="search_search" type="text" autofocus="autofocus" placeholder="Placeholder.Search.Main" name="search[search]"></input>
We can use HTML5 auto focus attribute
For Example:
<input type="text" name="name" id="search_search" placeholder="Placeholder.Search.Main" name="search[search]" />
We can use JQuery to do this using foxus()
Javascript:
$("#show").hover(function(){
$("#search_search").show();
$("#search_search").focus();
});
Doesn't work in Firefox but works in Safari
I think you might be looking for some client-side scripting (Javascript or javascript with JQuery).
If you don't want to accomplish this through client-side scripting, and only want to support html5, then you should take a look into the "autofocus" attribute of html5. See the top answer to this post.
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 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.