Input[type=radio]:перед торчащим радио

Закругленный край просто торчит из квадрата или круга, поэтому, если я сделаю before белый фон, край радио все еще будет слегка виден.

input[type=radio] {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
}

input[type=radio]:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid grey;
  border-radius: 50%;
  /* background-color: white; */
  position: absolute;
  top: 0;
  left: 0;
}

> <input type = "radio" name = "r" checked>

Как я могу полностью скрыть переключатель с помощью css before?

Как правило, это делается не так. Обычно всеinput скрыт, а label для него оформляется как выглядит как кнопка.

— 03.05.2019 11:43

Также см. - stackoverflow.com/questions/2587669/…

— 03.05.2019 11:44

не знаю, почему так сделано, в любом случае вы можете позиция по всему контейнеру вместо установки ширины и высоты jsfiddle.net/x7uLqv30

— 03.05.2019 11:49

Преимущество этого способа заключается в том, что вам не нужно изменять html. Во всех остальных случаях требуется какая-то настройка контейнера или этикетки. Например для чекбокса это работает идеально, потому что ничего не торчит в случае чекбокса типа вместо радио

— 03.05.2019 11:56

да @Gert, мне нравится ваш подход, иначе вам придется использовать внешнюю метку, div и т. д. Я пытался сделать это со свойствами по умолчанию, пожалуйста, проверьте ниже.

— 03.05.2019 12:12

Вы не должны использовать input:before в первую очередь. Эти элементы должны отображаться так, как если бы фактический дочерний элемент HTML был вставлен в родительский, но входные элементы не могут иметь дочерних элементов в первую очередь. Поддержка браузера в этом случае варьируется IIRC — не все браузеры поддерживают псевдоэлементы для ввода.

— 03.05.2019 14:29

css

03.05.2019 11:39

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Пожалуйста, найдите следующее решение: HTML:

<div class = "radio">
    <input type = "radio" name = "r" checked>
</div>

CSS:

.radio {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
}

.radio::before {
  content: "";
  visibility: hidden; // option-1
  /* opacity: 0;  // option-2 */
  /* display: none; //option-3 */
}

03.05.2019 11:49

Ответ принят как подходящий

Я думаю, что использование visibility:hidden может помочь, пожалуйста, проверьте ниже:

input[type=radio] {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  visibility: hidden;
 
}

input[type=radio]:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid grey;
  border-radius: 50%;
  /* background-color: white; */
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  
}
input[type=radio]:checked:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    /* border: 2px solid green; */
    border-radius: 50%;
    background-color: green;
    position: absolute;
    top: 5px;
    left: 5px;
    visibility: visible;
}

<input type = "radio" name = "r" checked>

03.05.2019 12:10

Здесь я попробовал другой способ сделать это, добавив span. Попробуйте.

.customRadio {
  position: relative;
}
input[type = "radio"] {
  opacity: 0;
  margin: 0 5px 0 0;
  transition: all 0.2s ease 0s;
}
input[type = "radio"] + .radioSpan {
  background-color: transparent;
  border: 1px solid #aaaaaa;
  border-radius: 50%;
  content: "";
  height: 17px;
  left: 0;
  position: absolute;
  top: 2px;
  width: 17px;
  transition: all 0.3s ease 0s;
}
input[type = "radio"]:focus + .radioSpan,
input[type = "radio"]:active + .radioSpan {
  box-shadow: 0 3px 5px 0 rgba(56, 49, 132, 0.5) !important;
}
input[type = "radio"]:checked + .radioSpan {
  background-color: #408BF9;
  border: 1px solid transparent;
}
input[type = "radio"]:checked + .radioSpan::before {
  background-color: #ffffff;
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 9px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 9px;
  z-index: 1;
}
input[type = "radio"] ~ .radioText {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  margin-left: 5px;
  text-transform: capitalize;
}

<label class = "customRadio">
    <input type = "radio"name = "reportType" value = "unsigned-report"/>
    <span class = "radioSpan"></span>
    <span class = "radioText">UnSigned Report</span>
</label>

да, спасибо, тоже работает, но предпочитает строгое разделение контента и стиля. Мне нравится html с минимальной структурой данных :)

— 03.05.2019 12:51

03.05.2019 12:27