Вопрос по html, css – Переключатель изменения размера [дубликат]

6

This question already has an answer here:

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

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

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

Error: User Rate Limit Exceededhow to askError: User Rate Limit Exceeded BryanH

Ваш Ответ

5   ответов
-1

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

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

Error: User Rate Limit Exceeded

.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 s,ome image */
}

Error: User Rate Limit ExceededError: User Rate Limit Exceeded

Error: User Rate Limit Exceeded
1

Styling radio button is not as easy as other form elements, but still you can do it with the help of css, by setting height and width, but the design differs from browsers The size look and feel can be changed, refer this link for reference, Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

3

Error: User Rate Limit Exceeded

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

Error: User Rate Limit ExceededradioError: User Rate Limit Exceeded

/* 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... */

Error: User Rate Limit Exceeded.

Error: User Rate Limit ExceededforError: User Rate Limit ExceededidError: User Rate Limit ExceededlabelError: User Rate Limit ExceededinputError: User Rate Limit ExceededspanError: User Rate Limit Exceeded

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

Error: User Rate Limit Exceeded

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... */

Error: User Rate Limit Exceeded.

Error: User Rate Limit Exceeded:checkedError: User Rate Limit Exceeded:checkedError: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

28

Error: User Rate Limit Exceeded

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

Error: User Rate Limit ExceededError: User Rate Limit Exceeded.

Original Answer (May 27, 2012)

Error: User Rate Limit Exceeded

Error: User Rate Limit ExceededError: User Rate Limit Exceeded

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
3

Error: User Rate Limit Exceededappearance:none;Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

Похожие вопросы