Geek asks and answers

Resize Switch

I want to resize the control using only HTML and / or CSS.

Can I do without using images?

+5
source share
5 answers

One quick fix for resizing a switch is to convert it:

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

As a result, all the switches are twice as large. As usual, check out browser support .

Original answer (May 27, 2012)

You cannot resize the switch. Typically, people will create a user interface user interface element to replace the checkbox / radio user interface aspect. Clicking on it leads to a click on the base checkbox / radio button.

. : http://webdesign.maratz.com...radio-buttons/jquery.html

+25

, -. Firefox, Safari Chrome , appearance:none; ( ), . IE Opera .

- javascript, , . , , javascript. , , , .

+3

HTML- :

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

CSS 'fake' 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 , , , psuedo-. , , Internet Explorer ( :checked).

:

+3

, ,       css, ,       , ,      http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

javascript, .

..

+1

IE8, :

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/

-1

More articles:


All Articles