The following code seems to have no effect in Firefox:
input[type="checkbox"] + input[type="checkbox"] {
margin-top: 12px;
}
While this works:
input[type="checkbox"] {
margin-top: 12px;
}
Why?
HTML
<div>
<input type="checkbox" name="somename[]" id="somename" value="1"> One<br>
<input type="checkbox" name="somename[]" value="2"> Two<br>
<input type="checkbox" name="somename[]" value="3"> Three<br>
...
</div>
It is because the + selector applies to an adjacent sibling. In your case that are the <br> tags so there are no adjacent checkboxes..
This works with the interjacent <br> tags:
input[type="checkbox"] + br + input[type="checkbox"] {
margin-top: 12px;
}
or use the ~ selector:
input[type="checkbox"] ~ input[type="checkbox"] {
margin-top: 12px;
}
In this case, the <br> tag is the adjacent sibling. You'll need to use the general sibling selector, ~, to select the sibling <input>.
input[type="checkbox"] ~ input[type="checkbox"] {
margin-top: 12px;
}
Related
I have a structure like this:
<div class="input-wrapper">
<input placeholder="Full name">
<label>
<span>*</span>
<span>Full name</span>
</label>
</div>
I want to hide the second span of the label with SCSS, when I do a focus on input field.
I tried to:
.input-wrapper{
$this: parent;
...
input{
&:focus{
parent > label > span:nth-child(2){
display: none;
}
}
}
}
.input-wrapper{
...
input:focus{
.input-wrapper__label > span:nth-child(2){
display: none;
}
}
}
Maybe I could do something with label > span:nth-child(2) with if?
To achieve expected result, you can use below option of adjacent sibling selector(+) of targeting label on input focus
input:focus + label > span:nth-child(2)
Sample code below and codepen - https://codepen.io/nagasai/pen/PoBLBBm for reference
input:focus + label > span:nth-child(2){
display: none;
}
<div class="input-wrapper">
<input placeholder="Full name">
<label>
<span>*</span>
<span>Full name</span>
</label>
</div>
I have a <label> tag that wraps checkbox. I want to define a style to that label if the checkbox is checked. Until now I've been relying on JavaScript but I see that there is a :has selector that might do what I want with CSS only
Here is my HTML:
<label><input type="checkbox name="param1"> Param 1</label>
Here is what I'm attempting in CSS:
label:has(input[type='checkbox']:checked){
background-color: #ccc;
}
However, it breaks my SCSS compiler before I even get to test it in a browser. I'm guessing that there is a CSS syntax error. My editor does highlight it as though there is an error, but I can't see where I've gone wrong.
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
You can use something like this:
input[type='checkbox'] {
display:none;
}
label{
height:30px;
width:30px;
border:1px solid red;
display:inline-block;
}
input[type='checkbox']:checked + label{
background-color: #000;
}
<input type="checkbox" id="id">
<label for="id"></label>
Yes, css have :has selector but No browser supports it.
I hope, this help to you:
input:checked + label {
color: red;
}
<input type="checkbox" name="param1" id="rad">
<label for="rad">Param 1</label>
I'm using CSS supplied in another post by Behaves Ganging which hides and shows content based on inputs being checked or not.
Here is the CSS
input#show, input#hide {
display:none;
}
span#content {
display:none;
}
input#show:checked ~ label[for="show"]
{
display: none !important;
}
input#show:checked ~ span#content {
display:block;
}
input#hide:checked ~ span#content {
display:none;
}
And the HTML
<label for="show">
<span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<span id="content">Content
<label for="hide">
<span>[Hide]</span>
<input type=radio id="hide" name="group">
</label>
</span>
See a working example here: http://jsfiddle.net/khnNe/466/
BUT, this CSS seems to be being ignored:
input#show:checked ~ label[for="show"]
{
display: none !important;
}
I want to hide the Label "Show" when it's input is checked. I've tried several other ways but none worked. ??
If I add CSS
label[for="show"]
{
display: none !important;
}
[Show] is hidden so it seems the
input#show:checked ~ label[for="show"]
is the culprit?
The selector is not working because the label is before the input.
The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.
You have to reverse the DOM order:
input#show,
input#hide {
display: none;
}
span#content {
display: none;
}
input#show:checked ~ label[for="show"] {
display: none !important;
}
input#show:checked ~ span#content {
display: block;
}
input#hide:checked ~ span#content {
display: none;
}
<input type=radio id="show" name="group">
<label for="show">
<span>[Show]</span>
</label>
<span id="content">Content
<label for="hide">
<span>[Hide]</span>
<input type=radio id="hide" name="group">
</label>
</span>
Is it posible to make an input checkbox a Bootstrap glyphicon?
I want to make up the default checkboxes with a nice Bootstrap glyphicon.
For example: glyphicon glyphicon-unchecked and when checked: glyphicon glyphicon-check.
I've tried this:
input[type='checkbox'] {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e157";
}
But nothing happened..
I don't know if that's posible?
You can achieve that in a couple of methods:
Method 1
inside a <label> tag, two <tags> that represent the icons that you want need to be placed(or outside, per use scenario)
then toggle these two <tags>, when the input[type='checkbox'] is checked or unchecked
done.
Method 2
a cleaner approach to the above one, would be to use the css from bootstraps icons, and place them in a :before(or :after depending on your scenarion) on the <label> tag
then toggle the content prop. of the :before class, that the icons that you want have, when the input[type='checkbox'] is checked or unchecked
done.
Check out the demo here and also, a couple of more through documentation on this matter:
Add boostrap icon to input boxes
Boostrap checkbox documentation
If you're able to modify your markup a bit, this should do:
<label for="myCheckbox" class="glyphy">
<input type="checkbox" id="myCheckbox" />
<span class="glyphicon glyphicon-unchecked"></span>
label words
</label>
$('.glyphy').click(function (e) {
if ($(e.target).is('input')) { // prevent double-event due to bubbling
$(this).find('.glyphicon').toggleClass('glyphicon-check glyphicon-unchecked');
}
});
Demo
if you have the icons, you can style it as such: http://jsfiddle.net/swm53ran/164/
/*hide checkbox and radio buttons*/
input[type=checkbox],
input[type=radio] {
width: 2em;
margin: 0;
padding: 0;
font-size: 1em;
opacity: 0; /*This is the part tht actually hides it*/
}
/*normalize the spacing*/
input[type=checkbox] + label,
input[type=radio] + label {
display: inline-block;
margin-left: -2em;
line-height: 1.5em;
}
/*unchecked css*/
input[type=checkbox] + label > span,
input[type=radio] + label > span {
display: inline-block;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Face-sad.svg/48px-Face-sad.svg.png');
width: 50px;
height: 50px;
}
/*selected checkbox css*/
input[type=checkbox]:checked + label > span > span {
width: 50px;
height: 50px;
display:block;
background-image: url('http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png');
}
/*selected radio css*/
input[type=radio]:checked + label > span > span {
width: 50px;
height: 50px;
display:block;
background-image: url('http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png');
}
<div>
<input id="check1" type="checkbox" name="check1" value="check1" />
<label for="check1"><span><span></span></span>Checkbox</label>
</div>
<div>
<input id="radio1" type="radio" name="radio" value="radio1" />
<label for="radio1"><span><span></span></span>Radio1</label>
</div>
<div>
<input id="radio2" type="radio" name="radio" value="radio2" />
<label for="radio2"><span><span></span></span>Radio2</label>
</div>
i want text inside the text field like "your name* "
the color of "your name" should be black and the color of * should be red.
how can i do this??
Please help me.
You cannot; the value of a text input field is plain text.
Put the explanation, including the requiredness indicator if desired, in a label, not into the field. The you can use markup for the indicator, and color it:
<label for=name>Your name<span class=reqd>*</span>:</label>
<input id=name name=name size=40 required>
I think you should want this
CSS
label{
color:black;
}
label span {
color:red;
}
input{
line-height:25px;
color:gray;
font-size:16px;
}
input:focus{
color:black;
}
HTML
<label>
Your Name:- <input type="text" value="your name"><span>*</span>
</label>
Live demo http://jsfiddle.net/rohitazad/dZmaZ/
You can't have different colours in one text box. (Reliably across browsers anyway)
The most common approach to this issue for required fields is to place the asterisk directly after the text box in an element with a class to set the text to red.
Example: http://jsfiddle.net/JzFd4/
This is what i was asking here in question.
Multiple Colors Placeholder.
Answer Link Here
Some Trick here
.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
opacity: 0.5;
}
.input-field > input[type=text]:focus + label {
display: none;
}
.input-field > label > span {
letter-spacing: -2px;
}
.first-letter {
color: red;
}
.second-letter {
color: blue;
<div class="input-field">
<input id="input-text-field" type="text"></input>
<label for="input-text-field">
<span class="first-letter">your name</span>
<span class="second-letter">*</span>
</label>
</div>