我有一个简短的示例,其中有2个自定义单选按钮,每个按钮都包裹在标签中,因此每个按钮的整个区域都是可单击的(不仅仅是单选按钮)。
我想将自定义方形单选按钮保持在左上方,然后将文本置于可点击区域的中央。但是我无法将文本与自定义单选按钮分开。
感谢任何帮助...
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>
在您的情况下,首先想到的是重组HTML以分隔input
,自定义输入和标签文本。然后,您可以简单地在标签文本中使用position: absolute
和top: 50%
:
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>
我建议您使用display: flex
将所有内容放置在中心,然后使用position: absolute
将单选按钮放在左上角。