is there an option or a way to style the f:selectItems of a h:selectOneRadio with different styles? i want e.g. a red and a green highlighted radio-button
best regards
After a seargh on google I have found this :
HTML file:
<label for="radio1">label 1</label><span></span><input type="radio" id="radio1" name="myRadio" checked="checked"/><span></span>
<label for="radio2">label 2</label><span></span><input type="radio" id="radio2" name="myRadio" /><span></span>
<label for="radio3">label 3</label><span></span><input type="radio" id="radio3" name="myRadio" /><span></span>
<label for="radio4">label 4</label><span></span><input type="radio" id="radio4" name="myRadio" /><span></span>
CSS file:
span{
position: absolute;
right: 0;
width: 25px;
height: 25px;
line-height: 25px;
padding: 3px;
color: #FFF;
text-align: center;
background: #c06f59;
}
span:after{
content: "no"; /*if CSS are disbled span elements are not displayed*/
}
input{
position: absolute;
right: 0;
margin: 0;
width: 31px;
height: 31px;
/*hide the radio button*/
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
cursor: pointer;
}
input[type="radio"] + span{ /*the span element that immediately follow the radio button */
visibility: hidden; /*temporarily hide the "YES" label*/
background: #6EB558;
}
input[type="radio"] + span:after{
content: "yes"; /*if CSS are disbled span elements are not displayed*/
}
input[type="radio"]:checked + span{
visibility: visible; /*show the "YES" label only if the radio button is checked*/
}
Hope it helpes you!
Thx, but the problem is, there are no elements created when rendered.
i found the solution:
table.choices > tbody > tr:first-child input:checked + label{
background-color:#228b22;
color:#F7F7F7;
}
table.choices > tbody > tr:first-child + tr input:checked + label{
background-color:#800000;
color:#F7F7F7;
}
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've made my radio buttons to full width, which wrap around the text, making entire text a radio button.
This is the code I used to make radio buttons look like buttons:
.list-checkbox-wrap .nf-field-element li label, .list-radio-wrap .nf-
field-element li label {
margin-left:0em;}
label.radio {
cursor: pointer;
}
label.radio input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
.list-checkbox-wrap .nf-field-element li label, .list-radio-wrap .nf-
field-element li label {
padding: 7px 14px;
border: 2px solid #EEE;
display: inline-block;
color: #009BA2;
border-radius: 3px;
text-transform: uppercase;
text-align:center;
}
input[type=checkbox], input[type=radio] {
visibility: hidden;
margin: 0;
width: 0!important;
}
input[type=checkbox] + label, input[type=radio] + label {
font-size: 16px;
}
input[type=checkbox] + label:hover, input[type=radio] + label:hover {
cursor: pointer; }
input[type=checkbox] + label:before, input[type=radio] + label:before{
font-family: "ETmodules";
font-size: 36px;
position: relative;
top: 0.3em;
margin-right: 0.2em;
}
However, I cannot manage to change border-color of box when radio button is selected.
html for radio buttons
<div class="nf-field-element"><ul aria-describedby="nf-error-37">
<li>
<input type="radio" id="nf-field-37-0" name="nf-field-37" class="ninja-forms-field nf-element nf-checked" value="Physical Product" aria-labelledby="nf-label-class-field-37-0">
<label for="nf-field-37-0" id="nf-label-class-field-37-0" class="nf-checked-label">Physical Product</label>
</li>
<li>
<input type="radio" id="nf-field-37-1" name="nf-field-37" class="ninja-forms-field nf-element" value="Digital Product" aria-labelledby="nf-label-class-field-37-1">
<label for="nf-field-37-1" id="nf-label-class-field-37-1" class="">Digital Product</label>
</li>
<li>
<input type="radio" id="nf-field-37-2" name="nf-field-37" class="ninja-forms-field nf-element" value="Subscription" aria-labelledby="nf-label-class-field-37-2">
<label for="nf-field-37-2" id="nf-label-class-field-37-2" class="">Subscription</label>
</li>
<li>
<input type="radio" id="nf-field-37-3" name="nf-field-37" class="ninja-forms-field nf-element" value="Service" aria-labelledby="nf-label-class-field-37-3">
<label for="nf-field-37-3" id="nf-label-class-field-37-3" class="">Service</label>
</li>
</ul></div>
this class is added to input when clicked
nf-checked
and this class is added to label when clicked
nf-checked-label
Found how to target the checked radio button css
input[type=radio]:checked + label {
...code here
}
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 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'm using materialize CSS for my project, but I want to override the style of radio buttons to do give some ratings using the code from this page, so I can get this:
But instead I'm getting this:
Here is my html:
<form id="ratingsForm">
<div class="stars">
<input type="radio" name="star" class="star-1" id="star-1" />
<label class="star-1" for="star-1">1</label>
<input type="radio" name="star" class="star-2" id="star-2" />
<label class="star-2" for="star-2">2</label>
<input type="radio" name="star" class="star-3" id="star-3" />
<label class="star-3" for="star-3">3</label>
<input type="radio" name="star" class="star-4" id="star-4" />
<label class="star-4" for="star-4">4</label>
<input type="radio" name="star" class="star-5" id="star-5" />
<label class="star-5" for="star-5">5</label>
<span></span>
</div>
</form>
And this is the CSS to make the stars appear:
form .stars {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
form .stars input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
form .stars input[type="radio"].star-5:checked ~ span {
width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span {
width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span {
width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span {
width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span {
width: 20%;
}
form .stars label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
form .stars label:hover ~ span {
background-position: 0 -30px;
}
form .stars label.star-5:hover ~ span {
width: 100% !important;
}
form .stars label.star-4:hover ~ span {
width: 80% !important;
}
form .stars label.star-3:hover ~ span {
width: 60% !important;
}
form .stars label.star-2:hover ~ span {
width: 40% !important;
}
form .stars label.star-1:hover ~ span {
width: 20% !important;
}
form .stars span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
What can I do to override the default style of radio buttons from Materialize CSS and leave only my stars?
If you are using sass, you can stop the form styling from being imported by editing /sass/components/forms/_forms.scss
#import 'input-fields';
// #import 'radio-buttons';
#import 'checkboxes';
#import 'switches';
#import 'select';
#import 'file-input';
#import 'range';
But keep in mind that none of your radio buttons will have the Material style.
I had the same problem, all I wanted was to remove those circles the same way you want, but I id it easier with the follow CSS:
[type="radio"]:not(:checked) + label::before, [type="radio"]:not(:checked) + label::after {
border: 0px;
}
[type="radio"]:checked + label::after, .with-gap[type="radio"]:checked + label::after {
z-index: -999;
}
You just need to include it after materialize or whatever CSS you have.