Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm working on an app that uses radio buttons. I'm trying to figure out how to make my radio buttons look better than the default radio buttons. However, I have not had any luck finding any examples online. Everything I find changes the radio buttons to a toggle button.
Basically, I want the radio button approach. I just want it to be bigger. I also want the selected radio button in a group to be green.
Is there a way to do this with CSS? If so, how? Or, do I need to use some custom control library?
Thank you!
The prevalent method is to use ::before pseudoelement, and format this. The radio/checkbox must be visually hidden.
input[type="radio"].fancy {
opacity: 0;
margin-right: -12px;
}
input[type="radio"].fancy + label::before {
content: "";
overflow: hidden;
font-size: 10px;
text-align: center;
margin-right: 3px;
display: inline-block;
vertical-align: middle;
border: 1px solid #333333;
background-color: #EEEEEE;
width: 12px;
height: 12px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
input[type="radio"].fancy:checked + label::before {
content: "•";
color: #777777;
background-color: #FFFFFF;
}
input[type="radio"].fancy:disabled + label::before {
background-color: #999999;
}
<p>
<input type="radio" class="fancy" id="radio1" name="radiogroup1" />
<label for="radio1">Fancy radio1</label>
</p>
<p>
<input type="radio" class="fancy" id="radio2" name="radiogroup1" />
<label for="radio2">Fancy radio2</label>
</p>
<p>
<input type="radio" class="fancy" id="radio3" name="radiogroup1" disabled="disabled" />
<label for="radio3">Disabled radio</label>
</p>
Googling for "css customized radio buttons" yielded a lots of useful results, such as this, here is a jsfiddle based on that tutorial, code provided below. Obviously, this is kind of workaround solution rather than native way of styling the radio buttons which to my knowledge doesn't exist.
HTML:
<div class="radio">
<input id="male" type="radio" name="gender" value="male"/>
<label for="male">Male</label>
<input id="female" type="radio" name="gender" value="female"/>
<label for="female">Female</label>
</div>
CSS:
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.radio label::before {
border-radius: 8px;
}
input[type=radio]:checked + label::before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
yes it can be done with the help of background image, below code snippets can be helpful
HTML:
<input type="radio" name="radio" class="radio" /> Yes
<input type="radio" name="radio" class="radio" /> No
CSS :
.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(radio.png) no-repeat;
display: block;
clear: left;
float: left;
}
links can help :
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
Related
I got this custom CSS code for the WooCommerce product search bar on the generatepress forums, thanks to David.
When I enter that custom CSS code, the search bar looks like this: https://i.stack.imgur.com/8CMdx.jpg
.woocommerce-product-search {
border-radius: 40px;
overflow: hidden;
display: flex;
flex-direction: row-reverse
}
.woocommerce-product-search input {
border-radius: 0 40px 40px 0;
border-left: 0
}
.woocommerce-product-search button:before {
content: "seach";
font-family: "Arial";
text-align: center;
display: inline-block;
font-size: 15px;
}
.woocommerce-product-search button {
font-size: 0px;
background-color: #fafafa;
color: #666666;
border: 1px solid #cccccc;
border-right: 0;
border-radius: 40px 0 0 40px;
}
I want the bar to stay that way but with the "search" button on the right side, like this: https://i.stack.imgur.com/FaOMt.jpg
Please, could you help me to do it? I would appreciate it very much.
---EDIT 12/11/2020---
HTML:
<div class="woocommerce widget_product_search"><form role="search" method="get" class="woocommerce-product-search" action="https://example.com/">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">Search for:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search products…" value="" name="s" />
<button type="submit" value="Search">Search</button>
<input type="hidden" name="post_type" value="product" />
</form>
</div>
Not sure that this will solve the issue without seeing the html, but give it a try:
.woocommerce-product-search {
border-radius: 40px;
overflow: hidden;
display: flex;
flex-direction: row;
}
I want to keep the background color of the input field as 'green', the problem is that when I click on it to write something, the color changes to default white again, here is my CSS code:
input{
width: 100%;
color: $white;
border: none;
border-bottom: 1px solid $grey-light;
outline: none;
font-size: 1rem;
margin-bottom: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: $green;
}
the HTML React part:
<form className="form">
<input type="text" name="name" className="form__name" placeholder="Name*"/>
<input type="email" name="email" className="form__email" placeholder="Email*"/>
</form>
You could use input:focus to keep the background green while typing. Make sure you do not have other css which is overriding this css.
Demo:
input {
width: 100%;
color: white;
border: none;
border-bottom: 1px solid grey-light;
outline: none;
font-size: 1rem;
margin-bottom: 1.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: green;
}
input:focus {
background: green;
}
<form class="form">
<input type="text" name="name" class="form__name" placeholder="Name*" />
<input type="email" name="email" class="form__email" placeholder="Email*" />
</form>
I think you have to use the :focus Property.
So like that:
input:focus {
background: #161616;
}
Use input:focus below input to write your css rules for the focus scenario.
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>
This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 6 years ago.
HTML:
<div class="first-label-container">
<label class="label-first label-common"><input type="checkbox" class="check-box" name="check" value="check"/> born in the real world</label>
</div>
CSS:
input[type="checkbox"] {
width: 16px; // working
height: 16px; // working
border: 5px solid #4d90cb; // not working
border-radius: 5px; // not working
}
I suggest a new solution for you. You need to change both the element and the style.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .label-first:after {
content: '✔';
position: absolute;
top: 3px;
left: 4px;
font-size: 18px;
line-height: 0.8;
color: #09ad7e;
transition: all .2s;
}
.label-first {
padding-left: 30px;
position: relative;
}
.label-first:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0;
border: 2px solid gray;
}
<div class="first-label-container">
<input type="checkbox" class="check-box" name="check" checked id="checkbox" />
<label class="label-first label-common" for="checkbox">born in the real world</label>
</div>
I hope it can help you.