Geek Answers Handbook

Using custom wrappers for input: pros and cons?

Often there are times when I need to have fully customizable input elements: checkboxes, radio buttons, selections, etc.

I just wanted to ask if this practice is acceptable and whether it is acceptable:

  • we create some kind of shell for our input (in this case, a box for radio communication)
  • we hide our real radio boxes (opacity: 0, visibility: hidden, left: -9999px, etc.).
  • We click on the parent shell: we get the input name attribute, find all the inputs with [type = "radio] [name =" clickedInputName "], set them all so that they are not marked, and set the one that we clicked to set it verify.

Attaching some not-so-pretty jsfiddle: https://jsfiddle.net/moLvh9dd/

    $('.radio-wrapper').on('click', function(e){
e.preventDefault();
var targetInput = $(this).find($('input'));

var clickedInputName = 'input[type="radio"]    [name="'+targetInput.attr('name')+'"]';

$(clickedInputName).each(function(){
    $(this).prop('checked', false);
    $(this).parent().removeClass('input-checked');
})

targetInput.prop('checked', true); 
$(this).addClass('input-checked');

});

Checked compatibility with browser + - it works everywhere up to IE8, so despite the fact that it just works, I want to know if this is correct? It is acceptable?

Even though it depends on javascript / jQuery.

EDIT:

Thanks for the great radio answers and checkboxes, but what about a custom selection item? With different choices for each choice?

For example, like here - some ugly jQuery again: https://jsfiddle.net/4gt7gavq/

+4
source share
3 answers

JS CSS . , , , CSS, - .

CSS

CSS. , CSS . HTML, , , :

<div>
  <input id="option" type="checkbox" name="field" value="option">
  <label for="option"><span><span></span></span>Value</label>
</div>

span . , .

:

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}

, , 3, 6, .

:

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}

, , , . , , , .

:

input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

CSS3. 15 , , .

:

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}

:

input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}

1 : , 2 span. 3, 4, 6, 7 8 , 5, 9 10 - .

, " ", , , span:

input[type=radio]:not(old):checked + label > span > span{
  display          : block;
  width            : 0.5em;
  height           : 0.5em;
  margin           : 0.125em;
  border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.125em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}

http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/#pureCSS

select , . .

, png brackground:

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
   border: 1px solid #ccc;
   }

http://bavotasan.com/2011/style-select-box-using-only-css/

+1

. , JavaScript / CSS, .

, , CSS, JavaScript.

, , - :checked .

, , .

:

*,*:before,*:after{box-sizing:border-box;font-family:sans-serif;}
input.radio{
    left:-9999px;
    position:absolute;
}
label.radio{
    cursor:pointer;
    display:block;
    line-height:20px;
    margin:0 0 10px;
    padding:0 0 0 26px;
    position:relative;
}
label.radio:before{
    border:1px solid #f00;
    border-radius:50%;
    content:"";
    display:block;
    height:16px;
    left:5px;
    position:absolute;
    top:2px;
    width:16px;
}
label.radio:after{
    background:#f00;
    border-radius:50%;
    content:"";
    display:block;
    height:8px;
    left:9px;
    opacity:0;
    position:absolute;
    top:6px;
    transform:scale(0);
    transition:transform .25s,opacity .5s;
    width:8px;
}
input.radio:checked+label.radio:after{
    opacity:1;
    transform:scale(1);
}
<input class="radio" name="radio-option" id="option1" type="radio" value="1">
<label class="radio" for="option1">Option 1</label>
<input class="radio" name="radio-option" id="option2" type="radio" value="2">
<label class="radio" for="option2">Option 2</label>
<input class="radio" name="radio-option" id="option3" type="radio" value="3">
<label class="radio" for="option3">Option 3</label>
<input class="radio" name="radio-option" id="option4" type="radio" value="4">
<label class="radio" for="option4">Option 4</label>
Hide result
+1

(tabindex).

0
source

More articles:


All Articles