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
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.
Hi I would like to target and modify the <label> tag only when is next to a input[type=radio], no in any other cirscuntances.
My code looks like this:
<fieldset>
<legend>Some legend</legend>
<p>Some explanation</p>
<label>
<input type="radio" name="#{name}" value="#{value}" />
</label>
</fieldset>
I tryied with fieldset label:first-child+input[type=radio]{} but doenst work, if someone can help me would be awesome.
EDIT:
What I want is to be able to style only the LABEL tag no the RADIO button INPUT tag, and this style will apply only when <label><input type="radio"></label> structure is found.
What you are asking for is not possible in CSS. It is not possible to traverse "back" or "up" the DOM tree (so you can't target previous siblings or parent nodes).
See this post: Is there a CSS parent selector?
I already posted a similar question and got a jQuery solution that works. Now I want to do it with only CSS/HTML. I saved twitter's homepage locally and deleted all the js scripts and noticed that the effect I'm trying to achieve is with CSS/HTML (when you click on the username/pass the values "Username"/"Password" stay there until you enter text).
I'm a newbie at these kind of new CSS/HTML effects and have spent the last couple of hours trying to replicate it with no success.
Here's the html of twitter's login form:
<form action="#" class="signin" method="post">
<fieldset class="textbox">
<div class="holding username">
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
<span class="holder">Username</span>
</div>
<div class="holding password">
<input type="password" id="password" value="" name="session[password]" title="Password">
<span class="holder">Password</span>
</div>
</fieldset>
<fieldset class="subchck">
<label class="remember">
<input type="checkbox" value="1" name="remember_me">
<span>Remember me</span>
</label>
<button type="submit" class="submit button">Sign in</button>
</fieldset>
I've looked over the site's CSS but it's 10,000 lines and very complicated. How should the CSS look like? Or could you point me out to a tutorial on how to achieve the same effect as this is driving me nuts?
Thank you very much,
Cris
Set the HTML autofocus attribute:
<input type="text" placeholder="Type here ..." autofocus="autofocus" />
You can target elements that are focused or blured like so:
input:focus {color:red;}
You now need to nest the CSS to hide the span called holder inside the input.
span.holder input:focus {visibility:hidden;}
I have not tried this, but it would be something like this.
To clarify, I have just pulled the JavaScript twitter use and the source for their home page and I can confirm that they are using the following JavaScript function for focus on the field
inp.focus()
The JavaScript is quite lengthy but it looks like after a quick read that they are using jQuery that is setting focus based on the class being username.
I just looked at the autofocus property suggested by another poster and this method has worked for me in my web app currently under development.
The code for this is
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on" autofocus>
Note, per the documentation at the W3C website, the autofocus property can only be used once on the page. I have put it into a form that is hidden and shown in an inline element using Fancybox.
The grayed out text in the input field can be done with the place-holder element, something I'm already using, add the following into your input element
placeholder="Username"
NOTE: Both placeholder and autofocus are HTML5 properties and may not be supported by all major browsers yet, this is why JavaScript is still being used by sites like twitter.
The styling is done based on CSS/CSS3 greatly, an excellent resource is W3Schools. I would recommend for what you're wanting to achieve start at the CSS3 section looking at borders.
Another resource that is excellent but hasn't been updated for about a month and a half sadly is doctype.tv. Nick has some fantastic advise regarding styling your website along with some great insight into design.
Judging by the bolded text in your question (when you click on the username/pass the values "Username"/"Password" stay there until you enter text), I'm guessing what you want is the placeholder attribute, which #phihag has in his example.
<input type="text" placeholder="This text will disappear" />
The placeholder attribute works without Javascript in browsers that support it. For older browsers, you'll need some Javascript, and this is probably what Twitter is doing in their code.
See the Wufoo page on the Placeholder Attribute for more details, including how to do a javascript fallback and what browsers it is currently supported in.
See also this demo which shows how to style the ":placeholder" and ":active" states (at least for webkit and mozilla).
I have created some simple Javascript to make a checkbox seem re-skinned that hides the checkbox and basically just pulls in a background image through CSS to show the checks/unchecks.
Is this HTML/CSS for hiding the checkbox accessible? I want to be as compliant as possible and am uncertain about the hiding and my label. Currently this is how it looks..
CSS:
.checked:hover, .unchecked:hover
{
background-color: #242424;
}
.checked
{
background-image: url(check.bmp);
color: #ffb500;
}
.unchecked
{
background-image: url(unchecked.bmp);
}
HTML:
<label for="cbAll" class="checked" id="lblAll">
<input id="cbAll" type="checkbox" name="cbAll" checked="checked"/>
ALL </label>
If you're worried about accessibility, I'd say that looking at others' (especially professionally written) code would be the best. jQuery UI is the one that immediately comes to mind. If you look at the code generated by jQuery UI's button widget, part of whose purpose is to serve as a checkbox replacement.
Original HTML:
<input type="checkbox" id="check" /><label for="check">Toggle</label>
Generated HTML:
<input type="checkbox" id="check" class="ui-helper-hidden-accessible" />
<label for="check" aria-pressed="false" class="[redacted]" role="button" aria-disabled="false">
<span class="ui-button-text">Toggle</span>
</label>
Notice the conformation to the WAI-RIA specification, with the correct use of the role attribute to indicate the role taken on by the label element as a button (the original input element is hidden, and thus ignored by screenreaders). You should have a look at the specifications if you want to know how to build things like this in an accessible manner.
Take a look at http://lipidity.com/fancy-form/
You can see how they do it and incorporate it in your own implementation.