I have a HTML template coming from an XML file but the radio buttons don't have a span class in front of the label in order for me to customise this. Is there a way I can style this using angular JS. Here is an example of the code:
<input type="radio" id="" value="y" name="" checked="">
<label for="">Ja</label>
There is nothing we can do about the XML adding in a span class on the parse so it has to be done on our front end framework.
Can't you just use the element in the CSS? Why does it need to have a span in order to be styleable?
input["radio"]{/* some styles */}
label{/* some styles */}
Related
Like the title says: can a checkbox be checked by default in the stylesheet, rather than in an inline HTML attribute?
Example from w3schools.com, the "car" box is checked:
<form action="demo_form.asp">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="submit" value="Submit">
</form>
I'm making an "I agree to the Terms and Conditions" checkbox, and due to the clunky website I'm making this on, I can't create inline CSS. Instead, I can assign this field a css class, and edit the class in the larger stylesheet.
If it makes it easier, this will be the only checkbox on the page.
A checkbox cannot be checked in CSS, unfortunately. It relies on the checked attribute of the input element, and attributes cannot be modified via CSS.
Alternatively, you could look into a JavaScript solution, but of course the best way would be to edit the HTML directly.
First of all, this is not a css but a html element's attribute.
Another way to check it is with javascript, and with css you can only select it like this:
input[type=checkbox]:checked /* select checked checkbox */
input[type=checkbox] /* select any checkbox */
I'm wondering if there is a CSS selector to select any label which refers to an input type checkbox.
<label for="checkbox_1">First checkbox</label>
<input type="checkbox" name="checkbox_1" value="1">
so what works easily:
label[for='checkbox_1'] { /* styles */ }
but then I have to repeat this for every label which refers to a checkbox.
I would like to do something like:
label[type='checkbox'] { /* styles */ }
Any thoughts?
You can use the selector that selects all LABELS with the type attribute starting with the word "checkbox":
label[type^='checkbox']
More information about attribute selectors here: http://www.w3.org/TR/css3-selectors/#attribute-substrings
This is currently not possible with pure CSS, as far as I know. You do have a couple of options for workarounds, though:
The [attribute^='value'] selector
This will work if your labels actually start with the same identifier/word when associated with checkboxes, similarly to the code example you provided.
Example:
HTML
<label for='chckbx'>Foobar</label>
<input type='checkbox' name='chckbx_1' value='1' />
CSS
label[for^='chckbx']{/* styles */}
Writing your HTML in a certain way
This will work if you already have your <label>s and their associated <input />s in their own container, or if you can modify your HTML to be that way. The trick is to select the checkbox element's container via CSS, and then style it's child <label>s.
Example:
HTML
<div class='checkboxContainer'>
<label for='foo'>Foobar</label>
<input type='checkbox' name='foo' value='1' />
</div>
CSS
.checkboxContainer > label{/* styles */}
Using JS
I can write a simple code example to do this with JavaScript(/jQuery), if you want me to.
Is there any way to style the tick mark checkbox only by using HTML and CSS3 without using images, like in Google's signin page?
You can accomplish this by using a combination of HTML, CSS and jQuery. See the code I whipped up here to create a checkbox from an <a> tag and style it with CSS.
I've tested this code and it works beautifully in Chrome, FF, & IE 7-10. Haven't tested Safari or Opera...
http://jsfiddle.net/wdews/reXL6/
Just make sure you nest your <a> checkbox tag in <form> tags, give it an ID, a class of "checkbox", and hashtag HREF. In essence:
<form action="#" method="get">
<a class="checkbox" id="myCheckbox" href="#"></a>
-or-
<a class="checkbox checked" id="myCheckbox" href="#"></a>
</form>
Let me know how that goes for you.
This post is old but this is what i suggest:
Associate labels to your checkboxes like this:
<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>
Hide by css your checkboxes:
.checkboxes input[type=checkbox]{
display:none
}
Style the label as you want to. I created a simple jsfiddle that fully demonstrate how to use personnalise checkboxes.
Here is the jsfiddle
Here are my jquery mobile checkboxes
i want to change its background color. i am using this piece of code
<fieldset data-role="controlgroup" data-type="vertical" style = "width:200px; padding-
top:7px;">
<input name="checkbox5" id="checkbox5" type="checkbox"/>
<label for="checkbox5" style = "color:#0A6E9A;" >
My Choice 1
</label>
<input name="checkbox6" id="checkbox6" type="checkbox"/>
<label for="checkbox6" style = "color:#0A6E9A; background-
color:#AFDCEF;" >
My Choice 2
</label>
</fieldset>
Change background color by adding your style "color:#0A6E9A; background-color:#AFDCEF;" in ".ui-checkbox .ui-btn-inner" in your "jquery.mobile-1.0.1.css" file.
see the output of your code:
http://jsfiddle.net/sV3D2/
Alternately I recommend creating a new theme style for these specific type of buttons. If you make the change stated above you will effect all buttons across the board. I usually do "data-theme="" and then I can create a new theme for these specific buttons.
so using the twitter bootstrap CSS framework,
if you display this html it will show with the text under the radio button, i want them to show to the right * or left of the radio button
this works if you replace Gender with Gender it will have the desired effect
however i do not have control over changing the tag to a span tag (im using a java based framework)
however i can prefix and suffix the html - shown in the example below
######## ADD PREFIX HTML ############<input type="radio" checked name="optionsRadios" value="option1" />
<label>Gender</label>#######ADD ADD SUFFIX THML ############
ur a wizard if you can get this working!, thanks guys
<div class="clearfix">
<label id="optionsRadio">Gender</label>
<div class="input">
<ul class="inputs-list" wicket:id="gender">
<li>
<label>
<input type="radio" checked name="optionsRadios" value="option1" />
<label>Gender</label>
</label>
</li>
<li>
<label>
<input type="radio" name="optionsRadios" value="option2" />
<label>Gender</label>
</label>
</li>
</ul>
</div>
The radio buttons on the bootstrap demo page render as you expect so there is either something in your own CSS causing this or a problem with your markup.
My guess is that the problem is because you have your radio buttons and your labels nested inside another label. Try removing the wrapper label and see if that works.
The label element must not have any nested label elements.