I wanted to try making custom radio buttons, however they only work on Chrome and Opera.
On Edge what I create using ::after is invisible, however on other browsers it is visible.
The problem seems to be visibility: hidden on radio. On Edge its children disappear, but on other Browsers visiblility:visible brings them back.
[type=radio] {
position: relative;
width: 50px;
height: 50px;
visibility: visible;
}
[type=radio]::after {
width: 50px;
height: 50px;
display: inline-block;
content: "";
background-color: pink;
visibility: visible;
border-radius: 100%;
}
<input type="radio">
The radio button in your code snippet doesn't change when clicked in Chrome. I made a demo in which the radio button's background-color will change to pink when clicked. I test it in Edge and Chrome and it works. You could check the code below.
input[type="radio"] {
display: none;
}
input[type="radio"] + label span {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 100%;
background-color: lightgray;
}
input[type="radio"]:checked + label span {
background-color: pink;
}
<input type="radio" id="radio01" name="radio" />
<label for="radio01"><span></span></label>
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.
I am using text-indent on select it is working in all browser but not working in Edge. Click here to see a JSFiddle demo
input {
text-indent: 50px;
display: block;
width: 600px;
}
select {
text-indent: 50px;
display: block;
width: 600px;
}
<input value="value text-indent (50px)">
<input placeholder="placeholder text-indent (50px)">
<select>
<option>sdasdasdasd</option>
</select>
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>
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>
I have a form input, and the label spans multiple lines, and I want the corresponding checkbox to appear at the bottom (last line of the label element).
Here is what I was playing with
CSS
.standard-form {
width: 500px;
border: 1px solid red;
}
.standard-form .input-row {
overflow: hidden;
margin-bottom: 0.8em;
}
.standard-form label {
width: 25%;
float: left;
}
.standard-form .input-container {
width: 70%;
float: right;
}
.standard-form .checkbox .input-container {
display: table-cell;
height: 100%;
vertical-align: text-bottom;
}
HTML
<form class="standard-form">
<div class="input-row checkbox" id="permission">
<label for="input-permission">
Do I hereby grant you permission to do whatever tasks are neccessary to achieve an ideal outcome? </label>
<div class="input-container">
<input type="checkbox" id="input-permission" name="permission" value="true" /> </div>
</div>
</form>
It is also online at JSbin.
Is there any way to do this? I notice that div.input-container isn't expanding, which is the old multi column problem with CSS.
I thought I could get this going with display: table-cell and vertical-align: bottom but I haven't been able to do it yet. I don't mind that IE6/7 won't render it correctly.
I have also tried using a combination of position: relative; with the child position: absolute; bottom: 0; except then I need to specify a height which I can not guarantee will be the height of the label on the left.
See my changes in action: http://jsbin.com/ocovu/2/edit
Here are the relevant declarations:
.standard-form .input-row {
overflow: hidden;
margin-bottom: 0.8em;
position: relative;
}
.standard-form .checkbox .input-container {
position: absolute;
bottom:-2px;
left:25%;
}
Tried display: block?