Issue
I have a short example of 2 custom radio buttons each wrapped in a label, so that the whole area of each is clickable ( not just the radio button ).
I would like to keep the custom square radio button up the top left and then center the text in the middle of the clickable area. But I can't separate the text from the custom radio button.
Appreciate any help...
input {
display: none;
}
/*
* Then, style the label so it looks like however you want.
* Here's a quick rundown of how I did it here:
*/
/*
* Some basic positioning styles, and we give it the pointer cursor to show
* that it's clickable
*/
label {
display: inline-block;
padding: 5px 10px;
cursor: pointer;
border: 1px solid gray;
width: 48%;
height: 200px;
float: left;
margin-right: 2%;
}
/*
* With how I decided to build this, the position: relative is super important.
* We're going to position a pseudo element within this element(As it is the containing box)
*/
label span {
position: relative;
line-height: 22px;
}
/*
* Because we're using pseudo elements, a content property is required to make them appear.
*/
label span:before,
label span:after {
content: '';
}
/*
* We are using the :before peudo elemnt as the actual button,
* then we'll position the :after over it. You could also use a background-image,
* font-icon, or really anything if you want different styles.
* For the specific style we're going for, this approach is simply the easiest, but
* once you understand the concept you can really do it however you like.
*/
label span:before {
border: 1px solid #222021;
width: 20px;
height: 20px;
margin-right: 10px;
display: inline-block;
vertical-align: top;
background-color: white;
}
label span:after {
background: #222021;
width: 14px;
height: 14px;
position: absolute;
top: 0px;
left: 3px;
transition: 300ms;
opacity: 0;
}
/*
* This is the most important part of this whole file, if you understand what's happening here
* you can really make this in so many different ways.
*
* We start by selecting the input inside of the label, with "label input". From there we use the
* ":checked" selector to *only* select the input when it is checked. We then use the immediate sibling
* selector(+) to select the span, and then it's pseudo element :after(What we are using to mark the button)
* Because we already styled the :after, all we have to do is set the opacity to 1, making it fade in.
*/
label input:checked+span:after {
opacity: 1;
}
<label style="background-color: #ddd;"><input name="radio" type="radio" /><span>EMAIL</span></label>
<label style="background-color: lightgray;"><input name="radio" type="radio" /><span>PHONE</span> </label>
Solution
First think to do in your case is to restructure your html to separate the input
, the customized input and the label text. Then you can simply use position: absolute
and top: 50%
to your label text and that all:
input {
display: none;
}
label {
display: flex;
position: relative;
padding: 5px 10px;
cursor: pointer;
border: 1px solid gray;
width: 48%;
height: 200px;
float: left;
margin-right: 2%;
}
label .radio {
position: relative;
line-height: 22px;
}
p {
position: absolute;
top: 50%;
margin: 0;
width: 100%;
text-align: center;
}
label .radio:before,
label .radio:after {
content: '';
}
label .radio:before {
border: 1px solid #222021;
width: 20px;
height: 20px;
margin-right: 10px;
display: inline-block;
vertical-align: top;
background-color: white;
}
label .radio:after {
background: #222021;
width: 14px;
height: 14px;
position: absolute;
top: 0px;
left: 3px;
transition: 300ms;
opacity: 0;
}
label input:checked+.radio:after {
opacity: 1;
}
<label style="background-color: #ddd;">
<input name="radio" type="radio" />
<span class="radio"></span>
<p>EMAIL</p>
</label>
<label style="background-color: lightgray;">
<input name="radio" type="radio" />
<span class="radio"></span>
<p>PHONE</p>
</label>
Answered By - johannchopin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.