Как центрировать текст в радио, завернутом в ярлык? - PullRequest
Новая
       39

Как центрировать текст в радио, завернутом в ярлык?

0 голосов
/ 12 января 2020

У меня есть короткий пример 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>

Ответы [ 2 ]

4 голосов
/ 12 января 2020

Я бы предложил вам использовать display: flex, чтобы расположить все по центру, и использовать position: absolute, чтобы поместить переключатель в верхнем левом углу.

Итак, что-то вроде этого: 

label{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    ...
}
input[type="radio"]{
    position: absolute;
    top: 5px;
    left: 5px;
}
1 голос
/ 12 января 2020

Первое, что нужно сделать в вашем случае, - это реструктурировать 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>
...