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
}
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:
After I used the css downloaded from the website to style my website, my radio button is disappeared. After deleting css my radio button became visible.
What css should I change to make the radio button work.
Below are the code that i think are the errors.
I tryed to delete some classes, and think the below code causing the radio button to go missing suddenly:
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
text-decoration: none;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 400;
padding-left: 2.4em;
padding-right: 0.75em;
position: relative;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
background: rgba(144, 144, 144, 0.25);
border-radius: 3px;
content: '';
display: inline-block;
height: 1.65em;
left: 0;
line-height: 1.58125em;
position: absolute;
text-align: center;
top: 0;
width: 1.65em;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
background: #2e3842;
color: #fff;
content: '\f00c';
}
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
box-shadow: 0 0 0 2px #21b2a6;
}
input[type="checkbox"] + label:before {
border-radius: 3px;
}
input[type="radio"] + label:before {
border-radius: 100%;
}
Below are code in php, not in cs.
My radio button and submit button and even the text which is update and delete cannot be displayed which is after ?> in the code
<form name="input" action="page4processupdate.php"method="post">
<?php
$seladmin= $_POST['fselect'];
{
$result = mysqli_query($connection,"SELECT * FROM Persons WHERE AdminNo = '".$seladmin."'" );
}
echo "<table border='1'><tr><th>Field</th><th>Value</th></tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr><td> Admin No</td><td><input type='text' name='uAdminNo' readonly='readonly' value='" . $row['AdminNo'] . "'></td></tr>";
echo "<tr><td> Address </td><td><input type='text' name='uAddress' value='". $row['Address'] . "'></td></tr>";
$fgender = $row['Gender'];
if ($fgender == "M")
{
echo "<tr><td> Gender </td><td>Male<input type='radio' name='uGender' value='M' checked>";
echo "Female<input type='radio' name='uGender' value='F'></td></tr>";
}
else
{
echo "<tr><td> Gender </td><td>Male<input type='radio' name='uGender' value='M'>";
echo "Female<input type='radio' name='uGender' value='F' checked></td></tr>";
}
echo "<tr><td> Email </td><td><input type='text' name='uEmail' value='". $row['Email'] . "'></td></tr>";
echo "<tr><td> Contact </td><td><input type='text' name='uContact' value='".$row['Contact'] . "'></td></tr>";
}
echo "</table>";
mysqli_close($connection);
?>
Update<input type='radio' name='fAction' value='Update' checked> <br/>
Delete<input type='radio' name='fAction' value='Delete'> <br/>
<input type="submit"value="Submit">
</form>
ty i found how to do i basically have to delete the entire code here, even if i remove the one you told me to remove it cannot work. so i basically remove the below code to make it work.
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}
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 creating a custom checkbox and want clicking the label text to also toggle the state and show or not show a text depending of the state of the checkbox just using CSS. I wrote this html:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + .label-text:before{
content: "+";
width: 1em;
height: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked + .label-text:before{
content: "-";
}
label input[type="checkbox"]:checked ~ .elements .is_not_checked{
display: none;
}
label input[type="checkbox"]:not(:checked) ~ .elements .is_checked{
display: none;
}
<label>
<input type="checkbox" name="check"> <span class="label-text">Item Two</span>
<div class="elements">
<div class="is_checked">
Checkbox is checked
</div>
<div class="is_not_checked">
Checkbox is not checked
</div>
</label>
This works. But I am not happy with the checkbox changing state when I click on the element text. However, when I move the elements out of the label I can no longer access the checkbox state. I tried:
(label > input[type="checkbox"]:checked) ~ .elements .is_not_checked{
display: none;
}
But this did not even hide the text. How can I access the state of a checkbox hidden in another element (label in this case) just using CSS?
Use HTML to "connect" the label to the checkbox. This will make a click on the label toggle the state, too. Using the checked state of the checkbox and the sibling selector you can toggle the elements.
<style>
input[type=checkbox] {
display: none;
}
input[type="checkbox"] + label:before {
content: "+";
width: 1em;
height: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked + label:before {
content: "-";
}
input[type=checkbox]:checked ~ .elements div.checked,
input[type=checkbox]:not(:checked) ~ .elements div.unchecked {
display: block;
}
input[type=checkbox]:checked ~ .elements div.unchecked,
input[type=checkbox]:not(:checked) ~ .elements div.checked {
display: none;
}
</style>
<input type="checkbox" id="check" name="check">
<label for="check">My Item</label>
<div class="elements">
<div class="checked">Checkbox is checked.</div>
<div class="unchecked">Checkbox is NOT checked.</div>
</div>
I have rearranged your HTML structure, replacing label with div class="label".
Instead of using display: none, the checkbox is hidden using opacity. You can then control the area it takes up.
.label {
position: relative;
display: inline-block;
}
input[type="checkbox"] {
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
input[type="checkbox"]+.label-text:before {
content: "+";
width: 1em;
height: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked+.label-text:before {
content: "-";
}
input[type="checkbox"]:checked~.elements .is_not_checked {
display: none;
}
input[type="checkbox"]:not(:checked)~.elements .is_checked {
display: none;
}
<div class="label">
<input type="checkbox" name="check">
<span class="label-text">Item Two</span>
<div class="elements">
<div class="is_checked">
Checkbox is checked
</div>
<div class="is_not_checked">
Checkbox is not checked
</div>
</div>
</div>
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;
}