Jsfiddle
Html
<label for="home" class="prof">
<img src="http://bigbackground.com/wp-content/uploads/2013/05/modern-house.jpg" class="image-label" />
</label>
<input type="radio" name="type" value="home" id="home">
<label for="home" class="type">House Owner</label>
CSS
.image-label{
width: 168px;
height: 168px;
border-radius: 100%;
}
input[type="radio"]:not(:checked),
input[type="radio"]:checked {
visibility: hidden;
}
label {
position: relative;
display: inline-block;
cursor: pointer;
float: left;
text-align: center;
width: 200px;
}
input[type=radio] + .prof img:hover {
border: 15px solid red;
border-radius: 100%;
}
input[type=radio]:checked + .prof img {
border: 15px solid red;
border-radius: 100%;
}
input[type=radio]:checked + .prof img:hover {
border: 15px solid red;
border-radius: 100%;
}
Trying to have border-radius with border color appear when hover the image or after click and tick appear. border-radius with border color seems not to be possible for image? Because I have tried label with background image on local and it worked. However using background image on label caused the tick to be mispositioned despite of absolute positioning.
Help appreciated.
Use <input> before its siblings <label>.
http://jsfiddle.net/W4XTj/1/
<input type="radio" name="type" value="home" id="home">
<label for="home" class="prof">
<img src="http://bigbackground.com/wp-content/uploads/2013/05/modern-house.jpg" class="image-label" />
</label>
<label for="home" class="type">House Owner</label>
FYI, the + selector selects the sibling elements after it.
input[type=radio] + .prof
This selects sibling elements that have class="prof" and are after(not before) the <input tpe="radio">
It's too bad that there is no standard specification in CSS3 for
selecting all sibling elements.
Try with this.
label img{border:2px solid #fff;}
label img:hover {border:2px solid #333;}
Related
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 used custom checkbox and radio button for my project using :before and :after, but this work only in "Google Chrome" and not supported in other browsers, Is any trick that's why it should look same in all browser, I don't want to use label after checkbox or radio button.
CSS is here:
FIDDLE ( For example )
My actual radio button looks like this :
Google Chrome:
Firefox:
IE:
Pseudo Elements like :before and :after add content before and after the content of an element. Checkbox and Radio buttons do not have content, so they don't support before and after pseudo elements. Chrome is ' special ' , but the normal behavior is the one from FF and IE.
Furthermore checkbox and radio are browser default elements. They are very hard to change and not supposed to be changed.
Although you said you don't want to add a label, that's the way to go. Add it with position absolute to put it on top of the radiobutton/checkbox like in the example below
body {
padding: 50px;
}
input[type='radio'] {
margin: 0;
height: 13px;
width: 13px;
margin-top: 2px;
position: relative;
}
div.wrapper {
position: relative;
}
input[type='radio'] + label {
content: '';
display: inline-block;
width: 13px;
height: 13px;
border: none;
position: absolute;
left: 0;
top: 1px;
background: gray url("../images/i-radio-empty.png") no-repeat 0 0;
}
input[type='radio']:checked + label {
width: 13px;
height: 13px;
background: red url("../images/i-radio-checked.png") no-repeat 0 0;
}
<div class="wrapper">
<input type="radio" name="gender" value="male" id="male"> Male
<label for="male"></label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="female" id="female"> Female
<label for="female"></label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="other" id="other"> Other
<label for="other"></label>
</div>
Mihai T's solution isn't bad, but not checking checkbox when cliking on text can be really anoying. I personally hate it :)
Though it is true that radio and chekbox does not support pseudo elemens :before and :after but label does. So you can have normal label with text and pseudo element :before with position: absolute.
div.wrapper {
position: relative;
display: inline-block;
margin-right: 10px;
}
input[type='radio'] {
display: none;
}
input[type='radio'] + label {
padding-left: 20px;
}
input[type='radio'] + label:before {
content: '';
width: 13px;
height: 13px;
position: absolute;
left: 0;
top: 1px;
background: #FFF;
border: 1px solid #999;
border-radius: 50%;
cursor: pointer;
box-sizing: border-box;
}
input[type='radio']:checked + label:before {
background: #000;
border: 4px solid #F9CC55;
}
<div class="wrapper">
<input type="radio" name="gender" value="male" id="male">
<label for="male">Create Tabs Group</label>
</div>
<div class="wrapper">
<input type="radio" name="gender" value="female" id="female">
<label for="female">Update Existing Tabs Group</label>
</div>
I don't see why the text starts in the middle anyway. I can use vertical-align to center it, but not move it up. I can't alter the padding, either. How can I move the text to the top? I'm trying to make a simple text box.
My HTML:
<label for="checkbox" id="rant" />RANT</label>
<input type="checkbox" id="checkbox" />
<input type="text" id="rantbox" />
My CSS:
#rantbox {
display:none;
position: absolute;
}
#checkbox:checked + #rantbox {
display: block;
width: 200px;
height: 300px;
background: white;
border: 2px solid black;
font-size: 15px;
outline: none;
position: absolute;
margin-top: 150px;
text-align: top;
vertical-align: center;
}
I have the Following Radio buttons in my jQuery mobile app , I need to style them as the Radio button in the image bellow . I have tried the following css but it didn't give me the same result , Please Help me ..
Html
<div data-role="page">
<div data-role="header" data-theme="b" style="height:63px;">
</div>
<div data-role="content">
<form>
<fieldset>
<input type="radio" id="Male" value=" Male" name="radio-group-1" />
<label for="Male" data-inline="true" style="background:transparent !important;">Male </label>
<input type="radio" id="Female" value=" Female" name="radio-group-1" />
<label for="Female" data-inline="true" style="background:transparent !important;" >Female </label>
</fieldset>
</form>
</div>
</div>
CSS
input[type="radio"] {
display: none;
}
.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
width: 25px;
height: 25px;
}
.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
margin-top: -18px;
margin-left: -38px;
}
.ui-btn.ui-radio-on:after{
width: 55px;
height: 55px;
background: green !important;
background-size:100px 24px;
}
This is what i get
To get a green inner circle with transparent around it and a border after that, you really need 2 circles. This could be achieved by adding a :before element as well as the :after element in CSS.
Here is a DEMO
The CSS makes the whole button 56px tall and vertically centers the text by making the line-height the same. When off, the radio image is 26x26 with a gray border. When on, the :before css adds a new 26x26 empty circle with a border while the :after css creates a smaller green circle in the center. NOTE: you may need to tweak sizes and margins to get your desired results.
input[type="radio"] {
display: none;
}
.ui-radio label {
height:56px;
line-height: 56px;
padding-left: 50px;
}
.ui-radio .ui-btn.ui-radio-off:after {
background-image: none;
width: 26px;
height: 26px;
border: 2px solid #6E7983;
margin-top: -13px;
}
.ui-radio .ui-btn.ui-radio-on:after {
background-color: #86D51C;
width: 14px;
height: 14px;
margin-top: -6px;
margin-left: 10px;
border: 0;
}
.ui-radio .ui-btn.ui-radio-on:before {
content:"";
position: absolute;
display: block;
border: 2px solid #6E7983;
border-radius: 50%;
background-color: transparent;
width: 26px;
height: 26px;
margin-top: 14px;
margin-left: -39px;
}
I have a checkbox that I am styling by hiding the input and targetting a span nested in a label. See http://jsfiddle.net/rz6np/
HTML:
<input id="confirm" type="checkbox" name="confirm" value="1" required="required" />
<label for="confirm"><span>+</span>Confirm</label>
CSS:
input[type="checkbox"] {
display: none;
}
form input[type="checkbox"] + label span {
display: inline-block;
width: 16px;
height: 16px;
margin: 1px 10px 5px 0;
vertical-align: middle;
cursor: pointer;
border: 1px solid grey;
color: #fff;
font-size: 15px;
padding: 2px 2px;
}
input[type="checkbox"]:checked + label span {
color: #000;
}
As the input is hidden it means the html5 required pop-up doesn't display. Is there a way to force it to display?
Assuming the design looks like this or similar to this, don't use display: none. The styled checkbox is large enough to cover it, so just position it over the checkbox with position relative or absolute, and appropriate z-index.
If it won't cover it completely, you could still get away with using visibility:hidden on the checkbox. I still see the popup in Firefox even though the field is invisible, but you'll need to check other browsers and how they behave.
input and span should be inside the label:
<label for="confirm">
<input id="confirm" type="checkbox" name="confirm" value="1" required="required" />
<span>+</span>
Confirm
</label>
Then on input:
label {
position: relative;
}
label > input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}