Trying to put a green box/circle after my radio button label or just before the label. Either one would work.
<div class="box green" ></div>
<input type="radio" id="radioOne" value="Y"/> <label>Verified Yes</label>
I know this is supposed to be easy with CSS but if I use display: inline in the css for the radio button, the circles disappear, beyond that I'm only able to place the circles in the line above or below the radio button.
Use display: inline-block, like:
.box {
display: inline-block;
width: 10px;
height: 10px;
background: green;
border-radius: 50%;
}
Have a look at the working snippet below:
.box {
display: inline-block;
width: 10px;
height: 10px;
background: green;
border-radius: 50%;
}
<input type="radio" id="radioOne" value="Y"/> <label>Verified Yes <span class="box green"></span></label>
<br>
<input type="radio" id="radioTwo" value="Y"/> <label><span class="box green"></span> Verified Yes</label>
Hope this helps!
Normally you should provide the CSS, etc.
https://jsfiddle.net/3n1n0y05/
Chances are you're just forgetting to set a width/height or content
#radioOne + label:before {
content: "";
width: 15px;
height: 15px;
background: red;
display: inline-block;
border-radius: 50%;
}
#radioOne:checked + label:before {
background: green;
}
Try this:
HTML
<div class="box green"></div>
<input type="radio" id="radioOne" value="Y"/>
<label>
Verified Yes <div class="box-green"></div>
</label>
CSS
.box-green {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 50%;
background: #00FF00;
}
Related
I've a tile with an input of type radio, a label and a span text below this two elements. The input and label are connected with an id. They should be next to each other. The span should be directly below the label. This works so far and my layout matches. If I click on the input or on the label, the radio gets selected. Now what I'd like to do is, to select the radio by clicking on the tile, no mather where. So every click on the tile should select my radio. I would like to solve this with pure HTML/CSS without using JS, if possible. The only idea I had, is to give position: relative; to the radio and position: absolute; to the radio__wrap and the label and make them have width/height of 100%, so I can pull over the label over the whole tile. This idea crashed my layout (hard do position the span correctly). Is there a way to solve this by using pure HTML/CSS. Below is my snippet:
.tile {
border: 1px solid transparent;
border-radius: 10px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
margin-bottom: 30px;
}
.tile__wrap {
position: relative;
}
.radio {
padding: 24px 16px 16px;
display: flex;
flex-direction: column;
position: relative;
}
.radio__wrap {
margin-bottom: 10px;
}
.radio__label {
background-color: lightblue;
position: relative;
}
.radio__text {
padding-left: 24px;
display: block;
}
.tile--clickable .radio__wrap {
position: relative;
width: 100%;
height: 100%;
z-index: 5;
}
.tile--clickable .radio__label {
width: 100%;
height: 100%;
}
<div class="tile">
<div class="tile__wrap">
<div class="radio">
<div class="radio__wrap">
<input class="radio__input" id="radio01" type="radio">
<label class="radio__label" for="radio01">I'm the label</label>
</div>
<span class="radio__text">I'm the text</span>
</div>
</div>
</div>
im trying to use input in label element but it get focus out of its border (in left and right side).
What is my code problem?
label {
display: block;
padding-top: 30px;
text-align: center;
}
label input
{
background-color: transparent;
font-size: 36px;
outline: 0;
text-align: center;
}
#comment
{
width: 75%;
height: auto;
margin: 0 auto;
border-radius: 10px;
background: #d9d9d9;
margin-bottom: 30px;
border: 6px lightblue solid;
}
#name
{
width: 35%;
border: 2px solid #ff5126;
}
#email
{
width: 50%;
border: 2px solid #ff5126;
margin-bottom: 30px;
}
<div id="comment">
<label>
<input placeholder="Name" type="text" id="name" required/>
</label>
<label>
<input placeholder="E-mail" type="email" id="email" required/>
</label>
</div>
The point of the label element (aside from associating some text — which is missing from your code — with the input) is that clicking on the label will focus the input.
Your labels are display: block, so they will fill the width of the container.
Add a background colour, border, outline, etc to see where it is.
I coded this simple CSS-trick to show when you click on the input (:focus) a tooltip will give you some information about the input. Everything is working but, the tooltip it's displayed below the input and not over. Actually I know that I can use margin to fix it, but I'm asking if there's a "more" clean way that when you use position absolute in this way, it will automatically align the tooltip over the input.
HTML:
<div>
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div>
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>
CSS
.input_info {
display: none;
position: absolute;
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
margin-left: 80px;
}
input[type="text"]:focus + .input_info {
display: block;
}
https://jsfiddle.net/xzqsaobu/
You need to change display: block to display: inline-block, remove the margin-left and position: absolute;.
Your fiddle updated.
Snippet:
.input_info {
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
display: none;
}
input[type="text"]:focus + .input_info {
display: inline-block;
}
<div>
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div>
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>
Here is how to do it with position: absolute and relative.
On the container, set position: relative, and display: table (shrink to fit).
For the position: absolute tooltip, set top: 0, and left: 100% (moves to the right edge of the relative container).
You can also horizonally center the fields in a page with this approach.
jsFiddle
.fieldset {
position: relative;
display: table;
/* margin: auto; */
}
.input_info {
position: absolute;
left: 100%;
top: 0;
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
display: none;
}
input[type="text"]:focus + .input_info {
display: block;
}
<div class="fieldset">
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div class="fieldset">
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>
HTML
<div class="select">
<div>
<label for="kitty" class="kitty-label kitty-label-1 l-center">
</label>
<input type="checkbox" name="cats" value="1">
<label>Kitty One</label>
</div>
<div class="cly-pam" style="width:50%; float: left">
<label for="kitty" class="kitty-label kitty-label-2 l-center">
</label>
<input type="checkbox" name="cats" value="2">
<label>Kitty Two</label>
</div>
</div>
<div>
css
label{
cursor: pointer;
}
.kitty-label{
position: relative;
width: 100%;
&:hover,
&:focus,
&:active{
border-radius: 6px solid #fff;
}
}
.kitty-label-1{
display: inline-block;
background: url(../img/kitty1.png) no-repeat 0 0;
height: 142px;
width: 142px;
}
.kitty-label-2{
display: inline-block;
background: url(../img/kitty2.png) no-repeat 0 0;
height: 144px;
width: 144px;
}
.select input[type="checkbox"]{
display: none;
&:checked + label:before{
background: url(../img/tick.png) no-repeat;
}
}
The labels would have background image but the issue is that when focus, active or hover, the border-radius does not appear behind the images. Also the kitty images do not have border-radius edges. Wonder if should have image in circle shape or css3 can do that?
Also checkbox seems not to show the tick or anything. Tried to click on label (as in kitty image), tick doesn't appear?
Not sure where I might go wrong. Help will be very much appreciated.
Updated
<div>
<input type="radio" name="type" value="designer" id="designer">
<label for="designer" id="designer" class="inline-block testsign" style="background: url(../img/face.png) no-repeat center;">
</label></div>
CSS
.testsign{
width: 170px;
height: 170px;
border-radius: 100%;
&:hover,
&:focus,
&:active{
border: 15px solid #f3f3f3;
}
}
// [type="radio"]:not(:checked),
// [type="radio"]:checked {
// visibility: hidden;
input[type="radio"]:checked + label:after {
content:"";
display: block;
position: absolute;
height: 60px;
width: 60px;
background: #f0f1f1 url(../img/tick.png) no-repeat center center;
border-radius: 100%;
border: 10px solid #fff;
}
Attempted the example from #misterMan
Couldn't get the label:after to be positioned at the right bottom - tried top and left to position the tick circle, but the problem is that when checked, it will appear in the position which followed top and left. So if check extra element or image, tick circle will appear in the same place which is not right. Removed the top and left. There is no way to have tick circle positioned in right bottom appearing in each label whenever radio is checked?
Also another problem is that when border radius on the label is hovered on background image, and if checked radio, the tick circle (label:after) will appear, the tick circle will be "jumpy" whenever hovered on label. How to stop the jump? I tried to add absolute center and position relative but the labels will be out of the container.
Help or insight will be appreciated.
I love this type of stuff so I made this for you, if you are still looking for a solution. I have added the images with <img> as they are not decoration, they are primary content :)
It's nice and simple, and I think does what you want. Let me know!
Updated
Have an updated fiddle!
HTML
<form>
<input type="checkbox" id="pic1" />
<label for="pic1">
<img src="http://www.placehold.it/200" />
</label>
<input type="checkbox" id="pic2" />
<label for="pic2">
<img src="http://www.placehold.it/200" />
</label>
</form>
CSS
body {
margin: 0;
}
input[type=checkbox] {
display: none;
}
label {
position: relative;
display: block;
width: 200px;
cursor: pointer;
float: left;
margin: 10px 0 10px 10px;
}
input[type=checkbox] + label img:hover {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
input[type=checkbox]:checked + label img {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
input[type=checkbox]:checked + label img:hover {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
input[type=checkbox]:checked + label:after {
content:"";
display: block;
position: absolute;
bottom: 10px;
right: 10px;
height: 50px;
width: 50px;
background: url(http://i.imgur.com/i7379jf.png) no-repeat right bottom;
background-size: 50px;
}
input[type=checkbox]:checked + label:hover:after {
}
I currently have two radio buttons in a form that I have used the CSS property content to insert an image for each button and that changes in opacity when selected or not. The original radio button still shows to the left of the image. Is there any way move the image so that it is centered over the original radio button?
#button1,
#button2 {
height: 150px;
width: 150px;
margin-left: 10%;
margin-right: 10%;
}
#button1 {
content: url(../assets/logo.gif);
opacity: .4;
-webkit-transition-duration: 1.5s;
}
I wonder if this FIDDLE is what you're looking for.
HTML
<label class="mickey" for="button1">
<input id="button1" type="radio" name="testme" />
<img src='http://i.imgur.com/Q7IJUNJ.png?1' alt='' />
</label>
<label class="mickey" for="button2">
<input id="button2" type="radio" name="testme" />
<img src='http://i.imgur.com/73kXZTR.jpg' alt='' />
</label>
CSS
#button1, #button2 {
display: none;
}
input[type=radio] + img{
cursor:pointer;
border: 2px solid blue;
opacity: 0.5;
}
input[type=radio]:checked + img {
border: 2px solid red;
opacity: 1.0;
}
img {
height: 100px;
width: 100px;
}