I have a basic html form where label tags are used to define field names and where label tags are used around checkboxes so that a user clicking on the text next to a checkbox also selects the checkbox.
<label>Valid?</label>
<label>
<input type="checkbox" />
Yes
</label>
What CSS is the best practice so that my field name is bold ("Valid?"), but my checkbox descriptor is not bold?
I have tried several variations adding different :not and :empty, but I'm not hitting the right selector - either both are bold or neither are bold. I know my :empty isn't working since the text element messes that up, but there must be a simple way to only bold labels that have only text elements.
label:empty {
font-weight: bold;
}
JS Fiddle: http://jsfiddle.net/z77tq8bs/
You can use the next sibling selector, like this:
label {
font-weight: bold;
}
label + label {
font-weight: normal
}
Check the fiddle: https://jsfiddle.net/8cLuhznb/
The :empty pseudo-class targets elements that have no children (not even a space).
The pseudo-class can be used in the following way: http://jsfiddle.net/3z1pnv71/.
HTML:
<label></label>
<label>
<input type="checkbox" />
Yes
</label>
CSS:
label:empty:before {
content: "Valid?";
font-weight: bold;
}
EDIT: It's also possible to keep all the textual elements in HTML and use the following approach, if it is suitable: http://jsfiddle.net/cqugufex/.
HTML:
<label data-text = "Valid?"></label>
<label>
<input type="checkbox" />
Yes
</label>
CSS:
label:empty:before {
content: attr(data-text);
font-weight: bold;
}
Found a few solutions to this, both of which work because the label descriptor is always the first label within the parent element, and any checkboxes are subsequent labels
Solution 1: first-of-type
label:first-of-type {
font-weight: bold;
}
Solution 2: first-child
label:first-child {
font-weight: bold;
}
I still haven't found a solution that finds if a label has only a text element, but this at least works for most cases.
Related
I'm trying to come up with some good default styling for <input>s in HTML5 and tried the following:
input::after { display: inline; }
input:valid::after { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }
Alas, the ::after content never shows up. It's not a problem with double- versus single colons for the pseudo-elements; I've tried both. It's also not a problem with having a pseudo-element and a pseudo-class; I've tried it without the :valid and :invalid. I get the same behavior in Chrome, Safari, and Firefox (Firefox doesn't have the :valid and :invalid pseudo-classes, but I tried it without those.)
The pseudo-elements work fine on <div>, <span>, <p>, and <q> elements -- some of which are block elements and some are inline.
So, my question is: why do browsers agree that <input>s don't have an ::after? I can't find anything in the spec that would indicate this.
As you can read here http://www.w3.org/TR/CSS21/generate.html, :after only works on elements that have a (document tree) content. <input> has no content, as well as <img> or <br>.
You can put a span before or after the element. E.g.:
<style>
#firstName:invalid+span:before {
content: "** Not OK **";
color: red;
}
#firstName:valid+span:before {
content: "** OK **";
color: green;
}
</style>
<input type="text"
name="firstName"
id="firstName"
placeholder="John"
required="required"
title="Please enter your first name (e.g. John )"
/><span> </span>
Webkit lets you do ::after on input elements. If you want a way to make it work in Firefox you could try using ::after on the input's label rather than the input itself.
I have the following html:
<label>
<input type="checkbox" value="cb_val" name="cb_name">
my checkbox text
</label>
With CSS I added a background-color to the <label> tag.
label { background-color:#333; color:#FFF; }
Now I'd liked to change the background color of the label when the checkbox is checked.
I know how to do it with javascript, but is there a way to to it just using CSS?
I have seen some solutions, but they use the adjacent sibling selector and only work when the label appears after the checkbox.
I still hope to fix this without javascript, does anyone have a clue?
UPDATE:
As I was afraid of, it cannot be done this way, so i must do it with JS, or achieve the same visual effect with a different HTML structure.
I want to set the background color of the label and the textbox in one go, so I can go with a solution where the checkbox is placed absolute on top of the label. Good point PlantTheldea!
Or I can apply the background color to the label and the checkbox both.
Thanks everyone!
You can achieve this with pure css like so,
<input type="checkbox" id="cb_1" value="cb_val" name="cb_name">
<label for="cb_1">
my checkbox text
</label>
With this css,
label { background-color:#333; color:#FFF; }
input[type="checkbox"]:checked + label {
background: brown;
}
JSFIDDLE
Keep in mind
The label has to be after the checkbox so you will need to style it around more to keep the same look you had.
Here is an option of styling it more to have the same appearance as you wanted, New fiddle. THIS DOES NOT involve positioning anything absolute, just some trickery.
You can't style the label itself directly via only CSS when the label is checked, but you can style a sibling of the checkbox.
http://jsfiddle.net/QdDpL/
HTML
<label>
<input class="check" type="checkbox" />
<span class="label-text">Checkbox</span>
</label>
CSS
label {
background: yellow;
}
label .label-text {
background: cyan;
}
label input.check:checked + .label-text {
background: lime;
}
You may also be able to fiddle with floats and padding to make the checkbox appear as if it was inside the .label-text span.
See the following links for browser support on the sibling selector:
http://caniuse.com/css-sel2
Alternately as another answer said, you can style the label if it is a sibling of the checkbox - but then just like my answer still would not contain the checkbox in the label.
With this input checkbox:
<input type="checkbox">Click moi!
...and this CSS:
input[type=checkbox] {
color:green;
font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;
}
input[type=checkbox]:hover {
box-shadow:0px 0px 10px #1300ff;
}
...the hover bit works fine (the checkbox itself changes), but the color / font of the text ("Click moi!") is not affected by setting color and font-family.
jsfiddle: http://jsfiddle.net/QRBEx/
How can I affect the text attributes via CSS?
The text should be within a label. Add a for attribute to attach it to the checkbox too.
jsFiddle example - it works.
<input id="checkbox" type="checkbox"/><label for="checkbox">Click me</label>
Then change the CSS:
label {
color:green;
font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;
}
input[type=checkbox]:hover {
box-shadow:0px 0px 10px #1300ff;
}
First, mark up the text correctly. You have a label for the input, use a label element.
<input type=checkbox id=myCheckbox> <label for=myCheckbox> Click moi! </label>
Then, make the assumption that the label for a checkbox will always immediately follow that checkbox in the markup and use the adjacent sibling combinator:
input[type="checkbox"] + label {
}
The <input> tag does not have an end tag - it's a self-closing tag. So the text next to it is not part of it. You need to style the text separately as its own element, like a <label>, for instance.
One good idea is to use a <span> tag:
<style>
#cb_span{color:green;}
</style>
<input type="checkbox"><span id="cb_span">Click moi!</span>
This text is not the part of the checkbox. It's the normal floating text and it belongs to its container (which is also checkbox's container). If you have your chackbox + text pair wrapped in some container e.g.
<div id="container">
<input type="checkbox">Click moi!
</div>
then you can add such CSS
#container {
color:green;
font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;
}
The text itself isn't part of the input element.
By instead placing the text in an HTML element and using a bit of CSS trickery, we can change the text like in the included fiddle:
http://jsfiddle.net/QRBEx/8/
The text needs to be in a label. create a label for the checkbox.
i hope this helps
I know there are lot's of questions regarding this query here but none of them provide the solution for me.
HTML
<input id="tb1" type="text" class="note" />
<br>
<p class="note1"> This is not done.</p>
CSS
p.note1:before{
content: "Note:";
}
tb1.note:before{
content: "Enter your number";
}
I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag.
EDIT: I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system.
EDIT2: Forget about my css, is there any way that placeholder text is possible without using placeholder attribute and just with plain css for input type="text"
:before creates a pseudo-element that is the first child of the element matched.
The selected element MUST be a container tag. An empty tag like <input> doesn't have any children element.
If you can't edit your HTML code manually, you're still able to that by using JavaScript:
document.getElementById("tb1").setAttribute("placeholder", "Enter your number");
Update
If you want to achieve this by using CSS only, you need to have a container element wrapping your <input> (or come after it).
BUT It doesn't work correctly as placeholder do. You'll not able to check the value of <input> by CSS. If you write something inside the <input>, after blur event, the generated placeholder will be displayed over the <input> again.
HTML:
<label>
<input id="tb1" type="text" class="note">
</label>
CSS:
label {
position: relative;
}
label:after {
content: 'Enter your number';
position: absolute;
left: 5px;
top: 0;
color: #bbb;
}
#tb1 {
position: relative;
}
#tb1:focus {
z-index: 10;
}
JSBin Demo
It doesn't work for the simple fact that this:
<input id="tb1" type="text" class="note"></input>
is not valid. <input /> elements are not containers. As the spec notes, endtags are forbidden (and essentially ignored by the browser): http://www.w3.org/TR/html401/interact/forms.html#h-17.4
If you cant manipulate the html and use placeholder="". Use javascript to manipulate the placeholder. Every css approach is hack-isch anyway.
E.g. with jQuery:
$('#myFieldId').attr('placeholder', 'Search for Stuff');
I have found this method but not supported by all browsers:
#tb1.note:empty:before{
content: "Enter your number";
}
Note: you have forgot to place an id selector # tb1.note
see this link
EDIT:
Try this for starters: (Note: you'll need some js to detect if text has been entered in the input)
Apart from this - I don't think this there is a css solution for placeholder text on an input element without using the placeholder attribute.
FIDDLE
Markup
<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>
css
.container
{
position: relative;
}
input
{
background: transparent;
}
input:focus + .fakePlaceholder
{
display: none;
}
.fakePlaceholder
{
color:gray;
position:absolute;
top: 3px;
left: 5px;
z-index: -1;
}
You can't use pseudo elements on an input tag - or any other non-container elements for that matter
From the Pseudo-Elements tag info:
you cannot use them (pseudo elements) with replaced elements (see
below) which do not have actual content. This is because the generated
content resides within the element.
...
Replaced Elements
Any element whose appearance and/or dimensions are determined by some
external resource is considered to be a replaced element. Some
pseudo-elements cannot be applied to replaced elements because they
have no "content" or get replaced with something (such as user
interface controls). Replaced elements include images (<img>), inline
frames (<iframe>), line breaks (<br>), horizontal rules (<hr>),
plugins (<object>), form elements (<button>, <textarea>, <input>, and
<select>), videos (<video>), audio sounds (<audio>), and canvases
(<canvas>). Any other element is considered to be a non-replaced
element.
Another way this can be accomplished, and have not really seen any others give it as an option, is to instead use an anchor as a container around your input and label, and handle the removal of the label via some color trickory, the #hashtag, and the css a:visited. (jsfiddle at the bottom)
Your HTML would look like this:
<a id="Trickory" href="#OnlyHappensOnce">
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
</a>
And your CSS, something like this:
html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */
a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */
a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */
a#Trickory input {
width:95%;
z-index:3;
position:relative;
background-color:transparent;
}
a#Trickory label {
position:absolute;
display:block;
top:3px;
left:4px;
z-index:1;
}
You can see this working over at jsfiddle, note that this solution only allows the user to select the field once, before it removes the label for good. Maybe not the solution you want, but definitely an available solution out there that I have not seen others mention. If you want to experiment multiple times, just change your #hashtag to a new 'non-visited' tag.
http://jsfiddle.net/childerskc/M6R7K/
Is there a non-javascript way of changing the color of a label when the corresponding checkbox is checked?
Use the adjacent sibling combinator:
.check-with-label:checked + .label-for-check {
font-weight: bold;
}
<div>
<input type="checkbox" class="check-with-label" id="idinput" />
<label class="label-for-check" for="idinput">My Label</label>
</div>
I like Andrew's suggestion, and in fact the CSS rule only needs to be:
:checked + label {
font-weight: bold;
}
I like to rely on implicit association of the label and the input element, so I'd do something like this:
<label>
<input type="checkbox"/>
<span>Bah</span>
</label>
with CSS:
:checked + span {
font-weight: bold;
}
Example: http://jsfiddle.net/wrumsby/vyP7c/
This is an example of using the :checked pseudo-class to make forms more accessible. The :checked pseudo-class can be used with hidden inputs and their visible labels to build interactive widgets, such as image galleries. I created the snipped for the people that wanna test.
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #0964aa;
font-style: normal;
}
<input type="checkbox" id="cb_name" name="cb_name">
<label for="cb_name">CSS is Awesome</label>
You can't do this with CSS alone. Using jQuery you can do
HTML
<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />
CSS
.highlight{
background:yellow;
}
jQuery
$('#check').click(function(){
$('#lab').toggleClass('highlight')
})
This will work in all browsers
Check working example at http://jsfiddle.net/LgADZ/