I have a form with a checkbox.
I want the checkbox and label to be invisible and replace them with an icon.
I want the icon to have the functionality of the checkbox.
Instead of an icon I'm just using a background now. When I click the background I want the form to change color (by selecting the checkbox).
When I click again the form should return to it's regular color.
On my real form the checkbox applies a filter so I need the checkbox funtionality.
Can't really get any of it to work.
https://jsfiddle.net/rom6qr84/1/
.form-item-edit-how-40 {
display: inline-block;
padding: 20px;
width: 50px;
height: 50px;
background: yellow;
}
.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
background: red;
}
input:checked {
background: green;
}
input,
label {
//display: none;
//visibility: hidden;
}
label {
background: grey;
width: 50px;
height: 50px;
}
<div class="form-item-edit-how-40">
<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
<label class="option" for="edit-how-40">Met de bus</label>
</div>
To get the result you're after, you'll need to change your HTML a little bit. You can't select parents in CSS (yet). And therefore you should use the "next sibling selector" (+). I've hidden the text in the label by putting it into a span. The label changes background color when the input[type="checkbox"] is checked, using the following selector: input:checked + label{}.
.form-item-edit-how-40 {
display: inline-block;
padding: 20px;
background: yellow;
}
.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
background: red;
}
input,
label span{
display: none;
visibility: hidden;
}
label {
display: block;
background: grey;
width: 50px;
height: 50px;
}
input:checked + label{
background: green;
}
<div class="form-item-edit-how-40">
<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
<label class="option" for="edit-how-40">
<span>Met de bus</span>
</label>
</div>
There is no parent selector in CSS. see similar Questions
Change Html Code .Look Like This.
Live Demo Here
Snippet Example
.form-item-edit-how-40 {
display: inline-block;
padding: 20px;
width: 50px;
height: 50px;
background: yellow;
}
.form-item-edit-how-40:hover {
background: red;
}
input[type="checkbox"]:checked + .form-item-edit-how-40 {
background: green;
}
input,
label {
//display: none;
//visibility: hidden;
}
label {
background: grey;
width: 50px;
height: 50px;
}
c
<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT" class="test">
<div class="form-item-edit-how-40">
<label class="option" for="edit-how-40">Met de bus</label>
</div>
I used to a label to get what you need and of course for now you can't in css get parent and change background. Regards and successful coding
.form-item-edit-how-40 {
display: inline-block;
padding: 20px;
width: 50px;
height: 50px;
/* background: yellow; */
position:relative;
}
.form-item-edit-how-40:active,
.form-item-edit-how-40:hover {
/* background: red; */
}
input,
label {
/*display: none;
visibility: hidden; */
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:-1;
outline:none;
background: yellow;
margin: 0;
}
input:checked {
background: green;
}
input:checked ~ label .fa:before {
content: "\f111";
}
label {
/* background: #808080; */
position: absolute;
top: 50%;
margin-top: -13px;
left: 50%;
margin-left: -13px;
padding: 3px 6px;
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="form-item-edit-how-40">
<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT">
<label class="option" for="edit-how-40"><i class="fa fa-circle-o" aria-hidden="true"></i></label>
</div>
Related
I want to display a pop-up when I click on my div.
Here is my html code :
<div class="test">
<!-- <input class="input input-readonly" type="text" placeholder="Code" [value]="id" readonly>-->
<div class="test input input-readonly">{{gameId}}</div>
<div class="test__popup">
<a [cdkCopyToClipboard]="id">{{'ID' | translate}}</a>
<a [cdkCopyToClipboard]="link">{{'LINK' | translate}}</a>
</div>
</div>
Mon fichier scss :
.test {
position: relative;
input {
cursor: pointer;
user-select: none;
}
&__popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: max-content;
padding: 10px;
background-color: $color-white;
box-shadow: $shadow-default;
flex-direction: column;
border-radius: 8px;
display: none;
a {
color: $color-primary-dark;
transition: color 100ms;
padding: 4px 0;
&:hover {
color: $color-primary-light;
}
}
}
&:focus-within .test__popup,
&:active .test__popup {
display: flex;
background-color: yellow;
}
}
In my HTML code I commented an input with the same class as my div. It works for my input but for my div when I click on it, the popup appears but disappears directly.
How to reproduce the same effect as with my input, ie my popup remains on the screen as long as I have not clicked elsewhere.
How to change the style of a radio button in vue.js that will merge the radio button and the label of the button together. I tried to change it according to this link Simple Radio Button Styling but I am unable to change it. Below is the code
<div id="product">
<h4>{{$translate('options')}}</h4>
<div v-for="(a,key,index) in attribute">
<h5>{{a}}</h5>
<v-radio-group small row v-model="selected[index]">
<v-radio :label="v" :value="v" v-for="v in options['V'+(index+1)]" :key="v"></v-radio>
</v-radio-group>
</div>
I wanted to make it from this style of button
to this type of style
I really hope there is a way to solve this problem and I wanted to learn from my mistakes as I am still learning vue js
You can use a v-for to render any HTML code. It doesn't have to be a Vue radio button...
In this case, you need to create a wrapper for each radio button. Typically I recommend wrapping the input INSIDE the label so the entire thing becomes clickable. The following example would give you lots of styling opportunities.
<label class="radio">
<input type="radio" name="group"/>
<span>Label Text</span>
</label>
So in VUE you would need something like this:
<label v-for="opt in options" v-bind:key="opt.value">
<input type="radio" v-model="opt.checked" value="opt.value" name="opt.groupName" />
<span v-html="opt.value"></span>
</label>
The browser's default CSS should render that something like:
[ ] Label text
And now that I have more time here's how you could do the styling.
Assuming that you managed to get your HTML structured like I did, you have a lot of options. To make this work you're going to use the adjacent sibling selector to change things when the radio button is selected. Also since styling radio buttons themselves is difficult we're just going to hide it and use its state to determine what should happen.
.example {
margin: 20px;
}
.example input {
display: none;
}
.example label {
margin-right: 20px;
display: inline-block;
cursor: pointer;
}
.ex1 span {
display: block;
padding: 5px 10px 5px 25px;
border: 2px solid #ddd;
border-radius: 5px;
position: relative;
transition: all 0.25s linear;
}
.ex1 span:before {
content: '';
position: absolute;
left: 5px;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ddd;
transition: all 0.25s linear;
}
.ex1 input:checked + span {
background-color: #fff;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.ex1 .red input:checked + span {
color: red;
border-color: red;
}
.ex1 .red input:checked + span:before {
background-color: red;
}
.ex1 .blue input:checked + span {
color: blue;
border-color: blue;
}
.ex1 .blue input:checked + span:before {
background-color: blue;
}
.ex1 .orange input:checked + span {
color: orange;
border-color: orange;
}
.ex1 .orange input:checked + span:before {
background-color: orange;
}
<div class="example ex1">
<h4>Select Color</h4>
<label class="radio red">
<input type="radio" name="group1"/>
<span>Red</span>
</label>
<label class="radio blue">
<input type="radio" name="group1"/>
<span>Blue</span>
</label>
<label class="radio orange">
<input type="radio" name="group1"/>
<span>Orange</span>
</label>
</div>
If you want remove material design icon from your project or customize it, u can use something like that:
.mdi-radiobox-blank{
background-color: #fff;
border: 0.084em solid #736c63;
border-radius: 50%;
width: 20px !important;
height: 20px !important;
margin-top: 2px;
margin-right: 2px;
}
.mdi-radiobox-marked{
border: 0.084em solid #003974;
border-radius: 50%;
position: relative;
width: 20px !important;
height: 20px !important;
margin-top: 2px;
margin-right: 2px;
}
.mdi-radiobox-marked::before{
background-color: #003974;
border-radius: 50%;
width: 10px !important;
height:10px !important;
content: " ";
}
Result without material design icons:
I am trying to change the background color of my radio button so that my whole button itself looks blue.
This is the html code :
<div class="col-sm-6" id="bcolor">
<center><label class="blue"><input type="radio" id="b1" name="toggle" ><span
</span></label> </center>
</div>
and these are the css styles I've tried and none of them seem to work :
input[type="radio"]
{
background-color : #5499C7;
}
input[type="radio"] + label
{
background-color : #5499C7;
}
input[type="radio"] +label.blue
{
background-color : #5499C7;
}
input#b1
{
background-color : #5499C7;
}
It would be great if someone could tell me what I'm missing.
input[type="radio"] + label
{
background-color : #5499C7;
height:15px;
width:15px;
display:inline-block;
vertical-align:text-top;
border-radius:50%;
}
input[type="radio"]:checked +label{
background-color: red;
}
<div class="col-sm-6" id="bcolor">
<center>
<input type="radio" id="b1" name="toggle" >
<label class="blue"></label>
</center>
</div>
You Can Try Something Like this.
The Problem in your code is that, you wrapped the input[radio] in the label tag and you are using the sibling selector + in CSS, which doesn't work.
Styling radio-buttons is not difficult, but you will need to use other element, most likely label, obvious choice so that you don't need javascript to handle click. It will look like radio-button, and radio-button itself will be hidden. The principle I shoed in snippet. Hope you will be able to reproduce it with your code. Need explanation of CSS or is it self-explanatory enough?
input {
position: absolute;
left: -10000px;
top: 0;
height: 0;
width: 0;
visibility: hidden;
}
label {
height: 34px;
width: 34px;
border-radius: 17px;
background-color: whitesmoke;
border: 1px solid silver;
position: relative;
display: block;
}
input:checked + label {
background-color: #5499C7;
}
input:checked + label:before {
display: inline-block;
position: absolute;
content: '';
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -10px;
background: silver;
width: 20px;
height: 20px;
border-radius: 10px;
}
<input type="checkbox" id="id1"/>
<label for="id1"></label>
This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 6 years ago.
HTML:
<div class="first-label-container">
<label class="label-first label-common"><input type="checkbox" class="check-box" name="check" value="check"/> born in the real world</label>
</div>
CSS:
input[type="checkbox"] {
width: 16px; // working
height: 16px; // working
border: 5px solid #4d90cb; // not working
border-radius: 5px; // not working
}
I suggest a new solution for you. You need to change both the element and the style.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .label-first:after {
content: '✔';
position: absolute;
top: 3px;
left: 4px;
font-size: 18px;
line-height: 0.8;
color: #09ad7e;
transition: all .2s;
}
.label-first {
padding-left: 30px;
position: relative;
}
.label-first:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0;
border: 2px solid gray;
}
<div class="first-label-container">
<input type="checkbox" class="check-box" name="check" checked id="checkbox" />
<label class="label-first label-common" for="checkbox">born in the real world</label>
</div>
I hope it can help you.
I made a form with checkbox as a forest image. I need to place another transparent background with text from html parameter (data-forest) over the forest checbox image but I have to do this only by CSS. I've tried so many solutions but no one work properly. Anyone have some idea?
Final effect on hover:
JsFiddle: https://jsfiddle.net/ac9z8sgd/
HTML
<form action="action" method="get">
<input type="hidden" name="test" value="test" />
<ul>
<li><input id="checkbox" type="checkbox" name="forest_type" value="forest_1"><label for="checkbox_forest" data-forest="Estern forest">Forest 1</label></li>
</ul>
<button type="submit">Submit</button>
</form>
CSS
/* Default check button */
#checkbox + label {
background: url('http://i.imgur.com/Ds7gh7b.jpg?1');
background-repeat: no-repeat;
height: 250px;
width: 250px;
padding: 15px 15px;
display: inline-block;
position: relative;
}
/* Hover action */
#checkbox + label[data-forest]:hover {
background: rgba(0,0,0,0.8);
content: attr(data-forest);
display: inline-block;
font-size: 20px;
color: white;
position: relative;
}
Use a pseudo-element.
/* Default check button */
#checkbox + label {
background: url('http://i.imgur.com/Ds7gh7b.jpg?1');
background-repeat: no-repeat;
height: 275px;
width: 184px;
display: inline-block;
position: relative;
}
/* Hover action */
#checkbox + label[data-forest]:hover::after {
background: rgba(0, 0, 0, 0.8);
content: attr(data-forest);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
font-size: 20px;
color: white;
display: flex;
}
<form action="action" method="get">
<input type="hidden" name="test" value="test" />
<ul>
<li>
<input id="checkbox" type="checkbox" name="forest_type" value="forest_1">
<label for="checkbox_forest" data-forest="Estern forest">Forest 1</label>
</li>
</ul>
<button type="submit">Submit</button>
</form>
JSfiddle with Transitions
My suggestion:
label[data-forest]:hover:before {
background: rgba(0,0,0,0.8);
content: attr(data-forest);
font-size: 20px;
color: white;
margin-top: 240px;
margin-left: -15px;
position: absolute;
width: 100%;
text-align: center;
}
BTW: Maybe 0.8 is too much a high value for a perceptible transparency. I'd make it 0.4.