Переключатель изменения размера [дубликат]

This question already has an answer here:

How to change the size of the radio button using CSS? 13 answers

Я хочу изменить размер переключателя, используя только HTML и / или CSS.

Можно ли обойтись без использования изображений?

Ответы на вопрос(5)

его преобразование:

input[type='radio'] {
    transform: scale(2);
}

В результате все переключатели становятся в два раза больше. Как всегда, проверьте поддержка браузера.

Первоначальный ответ (27 мая 2012 г.)

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

Смотрите пример здесь:http: //webdesign.maratz.com...radio-buttons/jquery.htm

Дать HTML похож на следующее:

<label>
    <input type="radio" name="group1" /><span class="radio1"></span>label 1 text</label>
<label>
<!-- and so on... -->

Следующий CSS позволяет добавить класс для изменения размера «фальшивки»radio элемент:

/* Hiding the radio inputs: */
input[type=radio] {
    display: none;
}
/* styling the spans adjacent to the radio inputs: */
input[type=radio] + span {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
/* styling the span following the checked radio: */
input[type=radio]:checked + span {
    background-color: #ffa;
}
/* defining the height/width for the span-radio: */
.radio1 {
    width: 0.5em;
    height: 0.5em;
}
/* and so on... */

JS Fiddle demo.

Вышеприведенная версия требует добавления элемента, который кажется ненужным, но допускает пропускfor а такжеid атрибуты отlabel а такжеinput элементы (соответственно). Если вы можете использовать эти атрибуты, тогдаspan элементы не нужны, что позволяет использовать HTML, например:

<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>

С помощью CSS:

input[type=radio] {
    display: none;
}
/* Creating the psuedo-element to replace the radio inputs: */
input[type=radio] + label::before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
/* styling the checked 'radio': */
input[type=radio]:checked + label::before {
    background-color: #ffa;
}
/* defining the height/width of the 'radio' according to the class of
   the radio input element: */
.radio1 + label::before {
    width: 0.5em;
    height: 0.5em;
}
/* and so on... */

JS Fiddle demo.

онечно, само собой разумеется, что эти подходы требуют браузеров, которые понима:checked псевдо-класс и, в случае последнего подхода, браузер, который реализует псевдо-элементы. Учитывая это, к сожалению, ни один из этих подходов не может быть использован в Internet Explorer до девятой версии (когда он начал реализовывать:checked селектор).

Ссылки

«Селекторы CSS» в Quirksmode.

кросс-браузерно. В Firefox, Safari и Chrome вы можете удалить стиль радио-кнопки по умолчанию, установивappearance:none; (с префиксами поставщика), тогда вы можете стилизовать его так, как вам нравится. Но IE и Opera пока не поддерживают это.

Единственный надежный способ создать стилизованные флажки - это использовать javascript, чтобы другой элемент работал как флажок. Но, конечно же, тогда ты трахаешь людей с отключенным JavaScript. В конце концов, проблема достаточно липкая, поэтому я, как правило, оставляю чекбоксы без стилей, за исключением позиционирования.

как другие элементы формы, но все же вы можете сделать это с помощью css, установив высоту и ширину, но дизайн отличается от браузеров. Размер и внешний вид можно изменить, см. Эту ссылку для ссылка,http: //www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button

Вы можете предпочесть javascript или пользовательский интерфейс изображения для четких изменений.

Благодарность .

HTML:

<div class="cb_wrap">
  <input type="checkbox" />
  <div class="cb_dummy"></div>
</div>​

CSS:

.cb_wrap{
  position: relative            
}

input{
  opacity: 0;  
  position: relative;
  z-index: 10;
}

.cb_dummy{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;  
  width: 15px;
  height: 15px;
  background: #f00;    /* use some image */
}

input:checked + .cp_dummy{
  background: #0f0;   /* use some image */
}

Демо:http: //jsfiddle.net/FKqj3

ВАШ ОТВЕТ НА ВОПРОС