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;
}
Related
I used a radio button in my simple project. The radio button looks good with a blue color background when selected. But while running the same code using Edge and Firefox, the background color is black.
I heard that the radio button style is Browser specific. Is this true?
And is there any possibility to change the style without custom radio buttons?
If a custom radio button is the only option, then how do you render it the same as in Google Chrome?
Radio Button visible in Chrome
Radio Button visible in Firefox and Edge
I recreated the chrome radio button with custom css and added a blue background instead of gray. It shows up the same on chrome, firefox, and edge. You might want to do some tweaking of the css to fit your size needs though.
Here is the code
HTML
div class="radio-item">
<input type="radio" id="ritema" name="ritem" value="ropt1">
<label for="ritema">Option 1</label>
</div>
<div class="radio-item">
<input type="radio" id="ritemb" name="ritem" value="ropt2">
<label for="ritemb">Option 2</label>
</div>
CSS
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: black;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid gray;
background-color: transparent;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 11px;
left: 12px;
content: " ";
display: block;
background: blue;
background-color: blue;
}
.mdcancel {
float: left;
}
#mdedit input[type='text'] {
display: block;
width: calc(100% - 20px);
margin: 7px auto;
border: 1px solid #999;
}
.mdcancel:hover {
opacity: 0.8;
}
<div class='md' id='mdedit'>
<input type='text' id='inpname'>
<br>
<div class='mdcancel'>CANCEL</div>
</div>
Type anything inside inpname and then hover .mdcancel.
You'll see that inpname moves left.
This won't happen if I change .mdcancel:hover - opacity:0.8 to some another - background:gold for example.
jsfiddle is here
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>
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;
}
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 {
}