i have a picture with 6 individual checkboxes on my website. How i make this code responsive (ipads, phones, (..) )? i know how to make a normal picture responsive but the checkboxes in the picture mess me up.
.pic label {
max-width:100%;
}
.pic{
background: url("http://fs5.directupload.net/images/161208/alpes8ns.png") no-repeat;
width:438px;
height:496px;
position: relative;
}
p {
margin: 0em 0;
padding: 0;
}
input[type="checkbox"] {
display: none;
}
label {
cursor: pointer;
}
input[type="checkbox"] + label:before {
outline: 1px solid #color;
content: "";
display: inline-block;
font: 17px/1em sans-serif;
height: 20px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 30px;
}
input[type="checkbox"]:checked + label:before {
background: url("https://picload.org/image/raallapr/ffffff-0.0.png");
color: #23708F;
content: "✓";
transform: scale(2);
text-align: center;
}
input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.poin1{
left: 350px;
bottom:23px;
position: absolute;
}
.poin2{
left: 350px;
bottom:99px;
position: absolute;
}
.poin3{
left: 350px;
bottom:178px;
position: absolute;
}
.poin4{
left: 350px;
bottom:259px;
position: absolute;
}
.poin5{
left: 350px;
bottom:348px;
position: absolute;
}
.poin6{
left: 350px;
bottom:423px;
position: absolute;
}
.buttondrunter{
left: 279px;
bottom:-82px;
position: absolute;
}
<div class="pic">
<p>
<input type="checkbox" id="poin1" name="cb" class="poin1">
<label for="poin1" class="poin1"></label>
</p>
<p>
<input type="checkbox" id="poin2" name="cb" class="poin2">
<label for="poin2" class="poin2"></label>
</p>
<p>
<input type="checkbox" id="poin3" name="cb" class="poin3">
<label for="poin3" class="poin3"></label>
</p>
<p>
<input type="checkbox" id="poin4" name="cb" class="poin4">
<label for="poin4" class="poin4"></label>
</p>
<p>
<input type="checkbox" id="poin5" name="cb" class="poin5">
<label for="poin5" class="poin5"></label>
</p>
<p>
<input type="checkbox" id="poin6" name="cb" class="poin6">
<label for="poin6" class="poin6"></label>
</p>
<p style="text-align: right;" class="buttondrunter"><a class="btn primary-button" href="#">Next</a></p>
</div>
Related
Made custom checkbox styles. But in different viewport widths dots inside of circles looks in a different position.
This is how it looks in one viewport width and another image shows how it looks in another viewport. In all cases, the radius of elements doesn't change. Here you can see the code that I use for the WordPress website.
Is there some way to make dots stable in any viewports?
input {
&[type="radio"] {
&:checked, &:not(:checked) {
position: absolute;
left: -9999px;
& + label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
border: 1px solid rgba(62, 62, 62, 0.5);
border-radius: 100%;
background: #fff;
}
&::after {
content: '';
width: 10px;
height: 10px;
background: $theme_color;
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
}
}
&:not(:checked) {
& + label {
&::after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
}
}
&:checked {
& + label {
&::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
}
}
}
<form action="#">
<p>
<input type="radio" id="test1" name="radio-group" checked>
<label for="test1">Apple</label>
</p>
<p>
<input type="radio" id="test2" name="radio-group">
<label for="test2">Peach</label>
</p>
<p>
<input type="radio" id="test3" name="radio-group">
<label for="test3">Orange</label>
</p>
</form>
Add display: flex to the <p> elements to prevent the label text wrapping below the radio button.
p{
display: flex;
}
form{
width: 150px;
background-color: #ddd;
padding: 1rem;
}
<form action="#">
<p>
<input type="radio" id="test1" name="radio-group" checked>
<label for="test1">Apple</label>
</p>
<p>
<input type="radio" id="test2" name="radio-group">
<label for="test2">This is some long piece of text that might wrap on smaller devices</label>
</p>
<p>
<input type="radio" id="test3" name="radio-group">
<label for="test3">Orange</label>
</p>
</form>
I have a page with 30 Checkboxes on it. Those are for seat reservation.
Now i tried to style them.
.seatlayout{
border: 1px solid;
display: table;
width: 30%;
padding: 6% 2% 0% 2%;
border-radius: 5%;
}
.seat{
position: relative;
width: 22%;
margin-bottom: 10%;
float: left;
text-align: center;
border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
position: relative;
width: 100%;
height: 100%;
}
[class^="seatcon"] label,
.seatdis label{
background-color: #f1f2ed;
cursor: pointer;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
z-index:10
}
[class^="seatcon"] input[type="checkbox"]:checked + label
{
background-color: #66bb6a;
}
.seatdis input[type="checkbox"]:checked + label{
background-color: grey;
pointer-events: none
}
[class^="seatcon"] input[type="checkbox"]:checked +
label:after {
opacity: 1;
}
<div class="seatlayout">
<div class="seat">
<div class="seatcont1">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab1">
</div>
</div>
<div class="seat">
<div class="seatcont2">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab2">
</div>
</div>
<div class="seat">
<div class="seatcont3">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab3">
</div>
</div>
</div>
Problem
No matter on which seat i click on, it always checkes the first one. I tried several approaches adding unique classes and id's while working with wildcards. Any help would be highly apprieciated!
You've put the same id on all of your checkboxes. You need to give them all a different id.
Additionally, you are missing an ending quote on all of your checkboxes after the type.
<input type="checkbox" id="checkbox">
<label for="checkbox" id="lab1">
....
<input type="checkbox" id="checkbox2">
<label for="checkbox2" id="lab1">
There are multiple things wrong.
The label element is never closed. The label element doesn't need an id it's the for attribute that needs to match the id of the input. Second the input of the checkboxes is never closed by an ". Third the id always needs to be unique, it's a unique identifier. So every input needs to have their own unique id.
.seatlayout{
border: 1px solid;
display: table;
width: 30%;
padding: 6% 2% 0% 2%;
border-radius: 5%;
}
.seat{
position: relative;
width: 22%;
margin-bottom: 10%;
float: left;
text-align: center;
border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
position: relative;
width: 100%;
height: 100%;
}
[class^="seatcon"] label,
.seatdis label{
background-color: #f1f2ed;
cursor: pointer;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
z-index:10
}
[class^="seatcon"] input[type="checkbox"]:checked + label
{
background-color: #66bb6a;
}
.seatdis input[type="checkbox"]:checked + label{
background-color: grey;
pointer-events: none
}
[class^="seatcon"] input[type="checkbox"]:checked +
label:after {
opacity: 1;
}
<div class="seatlayout">
<div class="seat">
<div class="seatcont1">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"> 1</label>
</div>
</div>
<div class="seat">
<div class="seatcont2">
<input type="checkbox" id="checkbox2">
<label for="checkbox2"> 2</label>
</div>
</div>
<div class="seat">
<div class="seatcont3">
<input type="checkbox" id="checkbox3">
<label for="checkbox3"> 3</label>
</div>
</div>
</div>
You have the same id for every checkbox. You should use a unique id for each one.
The fiddle is here.
Should be like this, in essence.
But in my custom checkbox, as you'll see in fiddle, it shows like this.
Note there are two inputs in checkgroup before a label
HTML
<div class=" text-left"><span class="font-weight-bold">Include</span> <span class="font-weight-bold">Exclude</span>
<div>
<div>
<div class="checkGroup"><input type="checkbox" class="include" value="Chicken"> <input type="checkbox" class="exclude"> <label>
Chicken
</label></div>
</div>
<div>
<div class="checkGroup"><input type="checkbox" class="include" value="Turkey"> <input type="checkbox" class="exclude"> <label>
Turkey
</label></div>
</div>
<div>
<div class="checkGroup"><input type="checkbox" class="include" value="Beef"> <input type="checkbox" class="exclude"> <label>
Beef
</label></div>
</div>
<div>
<div class="checkGroup"><input type="checkbox" class="include" value="Pork"> <input type="checkbox" class="exclude"> <label>
Pork
</label></div>
</div>
<div>
<div class="checkGroup"><input type="checkbox" class="include" value="Fish"> <input type="checkbox" class="exclude"> <label>
Fish
</label></div>
</div>
<div>
<div class="checkGroup"><input type="checkbox" class="include" value="No Meat - Vegetarian Only"> <input type="checkbox" class="exclude"> <label>
No Meat - Vegetarian Only
</label></div>
</div>
<div>
<div class="checkGroup"><input type="checkbox" class="include" value="No Meat - Vegan Only"> <input type="checkbox" class="exclude"> <label>
No Meat - Vegan Only
</label></div>
</div>
</div>
</div>
CSS
.checkGroup {
display: inline;
.exclude {
margin-left: 2em;
}
.include {
margin-left: 2em;
}
label {
margin-left: 2em;
}
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
position: relative;
padding-left: 1.95em;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked)+label:before,
[type="checkbox"]:checked+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1.25em;
height: 1.25em;
border: 2px solid #ccc;
background: #fff;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+label:after {
content: '✔';
position: absolute;
top: .2em;
left: .275em;
font-size: 1.4em;
line-height: 0.8;
color: #09ad7e;
transition: all .2s;
font-family: Helvetica, Arial, sans-serif;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked)+label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked+label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked)+label:before,
[type="checkbox"]:disabled:checked+label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked+label:after {
color: #999;
}
[type="checkbox"]:disabled+label {
color: #aaa;
}
}
Here's the principle:
.checkGroup {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.checkGroup [type=checkbox] {
visibility: hidden;
position: absolute;
}
cbox-image {
position: relative;
height: 1em;
width: 1em;
margin: 0 .35em;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #eee;
border-radius: 5px;
}
.checkGroup input:checked + cbox-image:after,
.checkGroup input + cbox-image + cbox-image:after { /* checked state */
content: '✔';
position: absolute;
font-size: 1.4em;
line-height: 0.8;
color: #09ad7e;
font-family: Helvetica, Arial, sans-serif;
}
.checkGroup input:checked + cbox-image + cbox-image:after,
.checkGroup input:not(:checked) + cbox-image:after { /* unchecked state */
content: none;
}
<label class="checkGroup">
<input type="checkbox" value="Turkey">
<cbox-image></cbox-image>
<cbox-image></cbox-image> Turkey
</label>
From your comments and chats, clicking <label> should not trigger any checkbox clicks.
Therefore your original CSS is basically useless because:
You have only 1 label for 2 checkboxes.
All your CSS is styling the 1 label as if there is 2 labels.
For example, this line:
[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
...
}
Does nothing because there isn't enough label available for one of those [type="checkbox"], other than the fact that they are overriding each other.
Besides, your CSS code contains a lot of self-overriding CSS similar to:
[type="checkbox"]:not(:checked), [type="checkbox"]:checked {...}
Where two opposite states use the same styling. It can be simplified to just
[type="checkbox"] {...}
Suggested Solution
You can transfer most styling from label to the [type="checkbox"] and [type="checkbox"]:checked::after.
Check this fiddle.
Not exactly what you asked for, but I'm sure you can tweak it yourself.
I'm having a problem with setting up box & shadow around my radio button. My CSS sets box only around radio button and shows nasty white square box around it. How to set border or outline around whole Radio-button + text to make selection more distinctive.
enrgy-form {
width: 50%;
float: right;
}
.label-width {
margin-left: 22px;
white-space: nowrap;
}
.label-nowrapp {
white-space: nowrap;
}
.selected-item input:checked {
/*border: 1px solid dodgerblue;*/
box-shadow: 3px 3px 11px 1px dodgerblue;
}
<div class="form-check enrgy-form">
<label class="form-check-label label-nowrapp selected-item">
<input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()">Fuel-fired</label>
</div>
I think your best bet is to simulate the radio button with css so you can have the behavior you want.
You should first set the input to display: none and give it an id in your HTML so you can link it with the label, by giving the label a for attribute, this way you can control the check/uncheck of your radio button from the label.
Next you want to simulate the appearance of the radio button, i'll do this by adding two spans, one inside the other, so we can have a checked/unchecked status.
try this:
enrgy-form {
width: 50%;
float: right;
}
.label-width {
margin-left: 22px;
white-space: nowrap;
}
.label-nowrapp {
white-space: nowrap;
}
.selected-item {
display: none;
}
.selected-item:checked + label {
box-shadow: 0px 0px 11px 2px dodgerblue;
}
label{
padding: 3px;
}
label .bullet{
border-radius: 50%;
border: 1px solid gray;
background-color: lightgray;
margin-right: 3px;
display: inline-block;
width: 10px;
height: 10px;
position: relative;
}
.selected-item:checked + label .bullet .bullet-selected{
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 5px;
height: 5px;
background-color: gray;
}
<div class="form-check enrgy-form">
<input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()" id="someUniqueId"/>
<label class="form-check-label label-nowrapp" for="someUniqueId">
<span class="bullet">
<span class="bullet-selected"></span>
</span>
Fuel-fired
</label>
</div>
You could go the route where you style the whole radio button using :before and :after in CSS. That way you could even go nuts with animations and stuff...
It would require you to change the HTML a bit as well....
There's plenty of examples to be found if you search for "css custom radio".
[type="radio"]{
position: absolute;
left: -9999px;
}
[type="radio"] + label
{
position: relative;
padding: 0 20px;
cursor: pointer;
}
[type="radio"] + label:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked + label:before{
box-shadow: 0px 1px 11px 1px dodgerblue;
}
[type="radio"] + label:after{
content: '';
display: none;
width: 10px;
height: 10px;
background: gray;
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
}
[type="radio"]:checked + label:after {
display: block;
}
<div class="form-check enrgy-form">
<input type="radio" name="energy" id="one">
<label for="one">Fuel-fired</label>
</input>
<input type="radio" name="energy" id="two">
<label for="two">Something else</label>
</input>
</div>
Update
Here is a possible solution, you could modify it as you want!
.form-check {
position: relative;
display: inline-flex;
align-items: center;
font-size: 1rem;
}
.form-check-label {
font-size: 0.9em;
margin-right: 0.25em;
white-space: nowrap;
}
.form-check-input {
margin: 0;
margin-right: 0.5em;
}
.form-check-input:checked + .form-check-label:after {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
border-radius: 1.5em 8px 8px 1.5em;
box-shadow: 3px 3px 11px 1px dodgerblue;
}
.medium { font-size: 2rem; }
.medium input[type=radio] { zoom: 2 }
.big { font-size: 3rem; }
.big input[type=radio] { zoom: 3 }
<div class="form-check">
<input id="inputcheck" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck" class="form-check-label">Fuel-fired normal</label>
</div>
<br><br>
<div class="form-check medium">
<input id="inputcheck1" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck1" class="form-check-label">Fuel-fired medium</label>
</div>
<br><br>
<div class="form-check big">
<input id="inputcheck2" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck2" class="form-check-label">Fuel-fired big</label>
</div>
can someone help me achieve that 2 ínputs look like one divided by a slash
Also doing it with twitter-bootstrap
Idea : http://postimg.org/image/pcgbzj4s1/
What I got so far but there is divided also I think they should overlap(slash with inputs)
<input class="form-control" type="text" name="kerkim" id="input_main">
<i id="slash">/</i>
<div class="input-group">
<input id="address" class="form-control" type="text" >
<div class="input-group-btn">
<button type="submit" class="btn btn-ẃarning"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
http://codepen.io/oroborus357/pen/doVKEP Here's the quick codepen I made for you, it shoud do what you need :)
<span class="first"><input type="text" /></span><input class="second" type="text" />
body {
padding: 50px;
background: #333;
}
* {
box-sizing: border-box;
}
input {
background: white;
border: none;
padding-left: 15px;
}
.first {
position: relative;
}
.first:before {
content: "/";
position: absolute;
left: 100%;
top: 0;
height: 100%;
transform: translateX(-50%);
font-size: 18px;
}
Many ways to it... here's two.
Given this html:
<div class="container">
<input type="text">
<span class="slash"></span>
<input type="text">
</div>
With this CSS:
.container{
border: 1px solid #999;
display: inline-block;
border-radius: 3px;
background: #fff;
margin-top: 50px;
position: relative;
}
.container input{
border: none;
background: none;
}
.slash{
transform: scale(3);
position: absolute;
}
/* or.... */
.slash{
width: 2px;
height: 28px;
background: #999;
transform: rotate(20deg);
position: relative;
display: inline-block;
position: absolute;
top: -5px;
}
A demo here