I've found a strange behavior in IE. When HTML code inside <form> tag it won't work.
<div>
<label>
<img src="media/afternoon-1.jpg" alt="">
<input type="checkbox" name="afternoon[]" value="1" />
</label>
</div>
http://jsfiddle.net/SiZE/nss7qz85/
Have test it in IE 11.0.9600.17842
Is it possible to fix it without JS?
Related
I have HTML structure like this:
<div class="input__wrapper default__label__down">
<div class="input__unit__wrapper">
<input name="fabricColor" id="allegro_red_1" class="radioGroup__imageItem__input" type="radio" value="allegro_red_1">
<span class="input__unit">mm</span>
</div>
<label class="radioGroup__imageItem__label" for="allegro_red_1">
<img alt="allegro_red_1" src="IMG SRC" class="radioGroup__imageItem__label__image">
</label>
</div>
How can I using SASS check if input (of type radio) is checked and then style img tag inside label?
I have three buttons the user can press. By default, I have the first one already pressed because I don't want the user to submit the form without pressing anything. The problem is that in mobile phones, if I press another button that hasn't the attribute of 'checked', it gets pressed normally but the one checked by default is not going away. This works fine in computer but not in mobiles. Any ideas?
This is my code:
<div class="control radio-toolbar" id="duration-picker">
<div class="control radio-toolbar container fm-radios">
<div style="display: inline-block" class="fm-radio dib">
<input checked class="date-button" type="radio" value="1" name="options" id="letter_pick_date_1" />
<label for="letter_pick_date_1">1 year</label>
</div>
<div style="display: inline-block" class="fm-radio dib">
<input class="date-button" type="radio" value="3" name="options" id="letter_pick_date_3" />
<label for="letter_pick_date_3">3 years</label>
<br><br>
</div>
<div style="display: inline-block" class="fm-radio dib">
<input class="date-button" type="radio" value="5" name="options" id="letter_pick_date_5" />
<label for="letter_pick_date_5">5 years</label>
</div>
</div>
</div>
Also one is above the other one and don't know how to solve this. I displayed them inline but wont work
EDIT: Another thing i could do is to have no default checked inputs. But how do I make this required so that nobody submits the form without pressing the buttons?
I'm having some trouble with the <input> HTML tag. I try to make one box checked but it isn't working. The HTML file is running with PHP. As you can see I used the default checked in the input. But it isn't working. How can I fix this without jQuery?
<fieldset id="imageselector">
<label id="labelog" class="container imageinput" style="display:none;">
<input id="Radioog" name="radio" class="radio" type="radio" value="img" checked/>
<img id="selector_image" class="selector_image" src="//youtube.com/yts/img/yt_1200-vflhSIVnY.png">
<span class="imagecheckmark"></span>
</label>
<label id="labelimg" class="container imageinput" style="display:none;">
<input id="Radioimg" name="radio" class="radio" type="radio" value="og"/>
<img id="selector_og" class="selector_image" src="//youtube.com/yts/img/yt_1200-vflhSIVnY.png">
<span class="imagecheckmark"></span>
</label>
</fieldset>
You have display: none on your label, this element is wrapping your radio inputs so none of that will show up. If you remove that, checked is working fine.
My checkbox isn't displaying in Chrome. It displays in other projects, but not in this one. I tried adding input[type="checkbox"] {-webkit-appearance: checkbox;} to my CSS, but that didn't work either. I'm not sure what else to do.
My code:
<div class="row">
<div class="col-lg-4 col-lg-offset-8">
<form>
<input type="checkbox" name="playerLeaderStats" value="goals" />Goals
<br />
<input type="checkbox" name="playerLeaderStats" value="redCards" />Red Cards
<br />
</form>
<button type="button" class="btn btn-primary">Set</button>
</div>
</div>
Is this code where the checkbox does not working ?
It working on Chrome, Firefox, IE : result on Chrome v54
Did you see if you've forgot a css property who modifying this type of input ?
Look with the Page Inspector if your input is really where it supposed to be even if it not visible ?
I seem to be having a strange problem which I can't fully understand.
This is my html:
<div class="menu">
Por favor seleccione os conteúdos:
<br/>
<br/>
<br/>
Nome:
<input name="Nome" class="checkbox" type="checkbox" value="Nome" checked />
<br/>
<br/>
Data:
<input name="Data" class="checkbox" type="checkbox" value="Data" checked />
<br/>
<br/>
Cliente:
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />
<br/>
<br/>
Observações:
<input name="Observações" class="checkbox" type="checkbox" value="Observações" checked />
</div>
Inside an Html page with nothing else except the default stuff from Dreamweaver, placed inside the body.
With this CSS attached:
#charset "UTF-8";
/* CSS Document */
.menu
{
width:300px;
margin-left: auto;
margin-right: auto;
padding:10px;
border: 1px solid #000;
}
.checkbox {
float:right;
}
Now this code renders properly in Safari, text on the left and check boxes aligned on the right inside a div.
In Firefox it does not.
The checkboxes seem like they dropped a line.
It seems to be related to a problem I can't understand, but If the checkbox comes first like:
<br/>
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />Cliente:
<br/>
It renders the intended way in Firefox although as expected its not good on Safari.
I can't seem to find what's causing the line drop.
Floats only affect code that follows them in the html. Since you have the input after the label, it will be floated right but on a new line. Different browsers render <br> in different ways.
A good cross-browser way to do checkboxes is
.cb-row {margin: 10px;clear:both;overflow:hidden;}
.cb-row label {float:left;}
.cb-row input {float:right;}
<div class="menu">
Por favor seleccione os conteúdos:
<div class="cb-row">
<label for="nome">Nome:</label>
<input id="nome" name="Nome" type="checkbox" value="Nome" checked />
</div>
<div class="cb-row">
<label for="data">Data:</label>
<input id="data" name="Data" type="checkbox" value="Data" checked />
</div>
<div class="cb-row">
<label for="cliente">Cliente:</label>
<input id="cliente" name="Cliente" type="checkbox" value="Cliente" checked />
</div>
<div class="cb-row">
<label for="ob">Observações:</label>
<input id="ob" name="Observações" type="checkbox" value="Observações" checked />
</div>
</div>
The label is floated left and the checkbox is floated right. They are contained in a row div that controls the margins between rows. I removed the class= from the input and instead styled the input in .cb-row input
An advantage of using label with the for= and input with the matching id=, is that when you click on the label, the checkbox will be selected/unselected.