Помещение css границ вокруг переключателей

Я пытаюсь получить яркую красную рамку вокруг некоторых переключателей, но она не отображается в последней версии Firefox или последней версии Chrome. Работайте отлично в IE9/IE8.

Каждый из элементов ввода в моей форме, которые требуются, имеет атрибут, требуемый значением val, который помещается MVC3. Все браузеры помещают красные границы только денди, когда у нас есть текстовые или текстовые входы, но я борюсь с переключателем. Для IE он работает, но другие браузеры не будут размещать вокруг него красную рамку.

CSS

input[data-val-required], select[data-val-required], textarea[data-val-required]
{
    background-color: #F0FFFF;
    border: 1px solid red;
}

Вид источника:

<label for="WaiveSelect">Do you waive confidentiality?</label><br />
<input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /> No, I do not waive confidentiality<br />
<input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /> Yes, I waive confidentiality<br />
<input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /> Yes, I waive confidentiality except to the client<br />
<span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"></span>

Как он выглядит в IE (Firefox и Chrome не показывают границ):

Ответ 1

Вы можете выполнить, обернув каждое < тип ввода = "радио" /" > с <div> и дайте ему границу и поплавок влево... вот так

<div style="border:1px solid red;float:left">
   <input type="radio".. />
</div>
No, I do not waive confidentiality

Ответ 2

input[type=radio]{
    outline: 1px solid red
}

Ответ 3

Я знаю, что это четыре года, но я придумал хорошее решение, используя элементы CSS Pseudo.

Мое требование состояло в том, чтобы выделить флажок, отмеченный галочкой, или переключатель в подтверждении.

<input type="radio" class="required" name="radio1"/>

/* Radio button and Checkbox .required needs an after to show */
input[type=radio].required::after, input[type=checkbox].required::after {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    content: '';
    border: 2px solid red !important;
    box-sizing: border-box;
}
/* Radio buttons are round, so add 100% border radius. */
input[type=radio].required::after {
     border-radius:100%;
}

Ответ 4

Не все браузеры поддерживают границы вокруг переключателей и флажков. Я проголосовал за ошибку несколько лет назад, чтобы включить это в Gecko, но пока они не реализовали его.

Ответ 5

Это может помочь вам:

.style {
  border: 1px solid red;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-top: 2px;
  background-color: #f0ffff;
}

<div class="style">
  <input type="radio" />
</div>
<div class="style">
  <input type="radio" />
</div>
<div class="style">
  <input type="radio" />
</div>
<div class="style">
  <input type="radio" />
</div>

Ответ 6

Полный код с помощью jquery

https://jsfiddle.net/xcb26Lzx/

$(function(){
      $('.layer').css('border',0);
    $('input:radio').change(
    function(){
        if ($(this).is(':checked')) {
            $('.layer').css('border','1px solid red');
        }
    });
});

Ответ 7

Попробуйте это...

Поместите div вокруг ввода и назначьте класс div так:

<div class="custom"><input type="radio"></div>

Затем откройте свой собственный файл css и добавьте этот CSS

.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;}

Это должно создать красивую красную рамку вокруг переключателя. Если вы используете флажок, вы просто удалите граничный радиус: 30px из css. В зависимости от вас, возможно, вам придется немного поиграть с прокладкой, чтобы центрировать кнопку, но это сработало для меня.

Изменить: вы также захотите назначить следующий CSS для div, чтобы он правильно выравнивался.

.custom {display: inline;}

ссылка на скрипку