Just wanted to know if anyone knew a way I can select and style the html tag directly after looking for :checked in css.
#btnControl:checked ??? html {
overflow: hidden;
}
Any feedback will be greatly appreciated! : )
Best, Jonathan
You can't select parent using CSS. But you can use class to do this work. Use javascript to add/remove class to element. When checkbox checked, add class to html and when checkbox unchecked, remove class of html.
var checkbox = document.getElementById("checkbox");
var html = document.getElementsByTagName("html")[0];
checkbox.addEventListener("change", function(){
if (checkbox.checked)
html.classList.add("checked")
else
html.classList.remove("checked")
});
html.checked {
background: orange;
}
<label for="checkbox">Click on checkbox</label>
<input id="checkbox" type="checkbox" />
Related
Is there any way that i could add a background color after placing a content inside an input field? Just like what happens when an autocomplete works.
Thanks!
There are a few ways you could achieve this. You could make the input mandatory by adding the required attribute. Doing this means that as soon as the user enters anything into the field, it is now in the valid state and you can target it in your CSS using the :valid pseudo-class:
input:valid{
background:#ff9;
}
<input required>
Or, if you don't want to make the field mandatory and as others have suggested, you could set the new background-color when the field receives focus. To prevent it from reverting to its initial color when it loses focus, you will need to add a transition to the background, setting the transition-delay to some ridiculously high number when the input is in its normal state and resetting it to 0s when it is focused. Obviously, though, this change will occur whether or not the user actually enters anything in the field or not.
input{
transition-delay:9999s;
transition-property:background;
}
input:focus{
background:#ff9;
transition-delay:0s;
}
<input>
If neither of those options suit your needs then you will probably need to resort to using JavaScript to add or remove a class, depending on whether or not the value of the input is empty.
document.querySelector("input").addEventListener("input",function(){
this.value?this.classList.add("filled"):this.classList.remove("filled");
},0);
.filled{
background:#ff9;
}
<input>
Html
First name: <input type="text" name="firstname">
Css
input:focus {
background-color: yellow;
}
Demo in JsFiddle
Here is a solution with pure javascript
var input = document.getElementById("test");
input.addEventListener('input', function() {
if (input.value)
input.style.backgroundColor = '#90EE90';
else
input.style.backgroundColor = '#fff';
});
<input id="test" type="text" value="">
Add a Css class like
.myCSSClass
{
background-color:red;
}
Now using jquery on blur function you add this class
$("#myTextBox").on('blur',function(){
if($("#myTextBox").val()==""){
if($("#myTextBox").hasClass("myCSSClass")){
$("#myTextBox").removeClass("myCSSClass");
}
}
else
{
$("#myTextBox").addClass("myCSSClass")
}
});
Using Jquery,
$( "#target" ).blur(function() {
$( "#target" ).css('background-color','red');
});
DEMO
I'm looking for a selector that let me style a label that's not near the respective input
Html
<article>
<header>
<label for="view-today-node-0">VIEW</label>
</header>
<input type="radio" name="view-today-node" id="view-today-node-0" />
</article>
I need to style the label when the radio is checked.
Something similar to
article input[type="radio"]:checked + label {}
but the label is not near the input
You can use the general sibling combinator (~) to style the label if it is not next to the input, but still a sibling:
input[type="radio"]:checked ~ label {
color:green;
}
Here is a fiddle: http://jsfiddle.net/EPHXU/
jQuery-Solution:
$("label[for='view-today-node']").css('background','#F00');
This might help. CSS alone won't be good for this, b4ttl3m4st3r was close I think. http://jsfiddle.net/a3v3x/
$("input[type='radio']").change(function(){
var color = this.checked ? "#f00" : "#000";
var id = $(this).attr('id');
$("label[for='"+id+"']").css('color',color);
});
I'm trying to get CSS Switches to work with ASP.NET rendered check-box.
The way that CSS Switcher structured and the ASP.NET check-box rendered make it hard to me to get it work and the problem not only in the span generated around the input it's also the label - which I need for sure - for the check-box, once I remove them from rendered HTML it works.
ASP.NET Check-box adds span and label when rendered as follow:
<span>
<input id="ID" type="checkbox" checked="checked" name="ID"></input>
<label for="ID">Label</label>
</span>
While the switcher needs the input to be wrapped in the following form:
<label class="switch switch-default">
<input type="checkbox" checked><span></span>
</label>
Here is an Example
here is how my check-box coded in my ASP HTML
<div class="col-sm-9">
<label class="switch switch-default"><asp:CheckBox id="chkAdd" runat="server" Text="Add" CssClass=""></asp:CheckBox><span></span></label>
</div>
Is there any workaround this problem?
I have found a solution and wanted to share.
As appears in this jsFiddle example which uses code similar to ASP.NET rendered check-boxes, the problem was with the CSS selectors and how to reach a parent that has a child check-box with checked or unchecked .. that is not applicable still in CSS. I had to add a jQuery function and change the selectors in my CSS to reach this jsFiddle result
$(document).ready(function () {
$('.switch input').each(function () {
var _span = $(this).closest('.switch').children('span.sw-inner');
if ($(this).is(":checked")) {
$(_span).addClass('checked').removeClass('un-checked');
} else {
$(_span).addClass('un-checked').removeClass('checked');
}
});
$('.switch input').change(function () {
var _span = $(this).closest('.switch').children('span.sw-inner');
if ($(this).is(":checked")) {
$(_span).addClass('checked').removeClass('un-checked');
} else {
$(_span).addClass('un-checked').removeClass('checked');
}
});
});
I would like to disable or hide the contents "Grouping"
of <label> tag without affecting the nested <input> tag.
<label class="" for="officersheet_fields_attributes_3_grouping">
<input type="checkbox" id="officersheet_fields_attributes_3_grouping" name="officersheet[fields_attributes][3][grouping]" value="1">
Grouping
</label>`
I am using formtastic within rails.
formtastic code snippet
<td><%= f.input :grouping %></td>
the above line generates the html above.
Thanks in advance
You may use text-indent: -1000em.
label
{
text-indent: -1000em;
}
But I don't think it is a good idea to have the input inside the label. Better have following:
<input type="checkbox"/><label>Grouping</label>
Add span tag around the label text and hide it
<label for="foo">
<input type="checkbox" value="1"><span>Grouping</span>
</label>
CSS
span{
display:none
}
DEMO
I would go for the span too, but if you have no control on your html structure, you could do something like this:
$(document).ready(function () {
$('label')
.contents()
.each(function() {
// if (this.nodeType == Node.TEXT_NODE); this works unless using IE 7
if (this.nodeType === 3) {
$(this).remove();
}
});
});
i am using toggle buttons in my application, i would like to set the backgound-color when the button is pressed.
how can i know what is the proper attribute?
and in general is there any place that i can know which CSS attribute has which effect on the HTML element?
If you are using GWT ToggleButton, then you may
import com.google.gwt.user.client.ui.ToggleButton;
final ToggleButton tb = new ToggleButton( "my button text" );
if (tb.isDown()) {
tb.addStyleName("pressed"); // or tb.setStyleName("pressed");
}
and in your css file:
.pressed { background-color: blue; } /* any color you want */
Another way - to change just background of this given button:
tb.getElement().getStyle().setProperty("background", "green");
I know GWT is similar to jQuery, but I've never used it... with jQuery I'd do this (I wasn't sure what kind of button tag you were using, so I included both):
CSS
input, button {
background-color: #555;
color: #ddd;
}
.clicked {
background-color: #f80;
}
HTML
<button type="button">Click Me</button>
<input type="button" value="Click Me" />
Script
$(document).ready(function(){
$('button, :button')
.mousedown(function(){ $(this).addClass('clicked') })
.mouseup(function(){ $(this).removeClass('clicked') })
.mouseout(function(){ $(this).removeClass('clicked') });
})
and in general is there any place that i can know which css atribute has which effect on the HTML element?
Yes, http://www.w3schools.com/css/ has most of what you will probably need. Check the left column for the CSS-property you're looking for.
Regarding your first question, I you can just use the btn:active, btn:hover, btn:visited properties. (i.e. your button has the class/id 'btn'.)
Good luck