<label><input type="range" name="name" min="0" max="10" /></label>
<label><input type="range" name="name" min="0" max="100" />Позиция: </label>
<label><input type="number" name="name" value="1" step="0.5"/>number:</label>
<label><input type="radio" name="name" value="" />type=radio 1</label>
<label><input type="radio" name="name" value="" />type=radio 2</label>
<label><input type="file" name="name" value="" /> Выбрать архив zip</label>
<label><input type="checkbox" name="name" value="" />type=checkbox 1</label>
<label><input type="checkbox" name="name" value="" />type=checkbox 2</label>
<label>Цвет забора:
<select name="year">
<option value="c1">Апельсиновый</option>
<option value="c2">Лимонный</option>
<option value="c3">Персиковый</option>
<option value="s3">Темный</option>
<option value="s1">Светлый</option>
</select>
</label>
<label>Комбинированный цвет:
<select name="year" multiple>
<option value="c1">Апельсиновый</option>
<option value="c2">Лимонный</option>
<option value="c3">Персиковый</option>
<option value="s3">Темный</option>
<option value="s1">Светлый</option>
</select>
</label>*{margin:0;padding:0;font-size:16px;}
body{height:100%;width:100%;background:#262626;color:#ffffff;font-weight:700;}
textarea{min-width:100%;max-width:100%;width:100%;box-sizing:border-box;border-radius:3px;display:block;
border:1px solid #000000;font-size:16px;font-weight:700;padding:5px;}
.Form{position:relative;min-width:60px;display:block;height:32px;cursor:pointer;border-radius:3px;}
.Form input{position:absolute;top:0px;left:0px;height:100%;width:100%;box-sizing:border-box;border-radius:3px;
border:1px solid #000000;font-size:16px;font-weight:700;padding:5px;
}
.Form input[type=button],.Form input[type=submit],.Form input[type=reset]{
color:#ffffff;background:#6cb1ff linear-gradient(#6cb1ff 0%,#000000 100%);box-shadow:inset 0 2px 2px -2px #ffffff;
}
.Form input[type=button]:hover,.Form input[type=submit]:hover,.Form input[type=reset]:hover{
color:#ffffff;background:#0078ff linear-gradient(#0078ff 0%,#000000 100%);box-shadow:inset 0 2px 2px -2px #ffffff;
}
.Form input[type=radio],.Form input[type=range],.Form input[type=number],.Form input[type=file]{opacity:0;}
.Form select{display:none;}
.Form-Name{position:absolute;text-align:center;border-radius:3px;top:0px;left:0px;bottom:0px;right:0px;padding:5px;border:1px solid #000000;background:#FFF;color:#000000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.Form input:checked~.Form-Name{background:#0078ff linear-gradient(#6cb1ff 0%,#0078ff 100%);}
.Form:hover{box-shadow: 0 0px 3px 1px #0053b1;z-index:100;}
input:focus~.Form-Name,input:focus~.Form-Right,input:focus~.Form-Left{color:#0053b1;border-color:#0096fa;}
.Form input:disabled~.Form-Name{background:#b9b9b9;color:#818181;}
.Form [type=radio]~.Form-Name,.Form [type=checkbox]~.Form-Name{color:#ffffff;background:#363636 linear-gradient(#363636 0%,#000000 100%);box-shadow:inset 0 2px 2px -2px #ffffff;cursor:pointer;}
.Form [type=range]~.Form-Name{}
.Form [type=number]~.Form-Name{padding:5px 30px 5px 30px;}
.Form [type=file]~.Form-Name{padding:5px 30px 5px 5px;}
.Form select~.Form-Name{padding:5px 30px 5px 5px;}
.Form-Right{min-width:18px;text-align:center;position:absolute;top:0px;right:0px;bottom:0px;padding:5px;border:1px solid #000000;border-radius:0 2px 2px 0;background:#363636 linear-gradient(#363636 0%,#000000 100%);color:#ffffff;box-shadow:inset 0 2px 2px -2px #ffffff;cursor:pointer;}
.Form-Left{min-width:18px;text-align:center;position:absolute;top:0px;left:0px;bottom:0px;padding:5px;border:1px solid #000000;border-radius:2px 0 0 2px;background:#363636 linear-gradient(#363636 0%,#000000 100%);color:#ffffff;box-shadow:inset 0 2px 2px -2px #ffffff;cursor:pointer;}
.Form-Scroll{min-width:18px;text-align:center;position:absolute;padding:5px;top:0px;bottom:0px;background:#363636 linear-gradient(#363636 0%,#000000 100%);border:1px solid #000000;border-radius:2px;color:#ffffff;box-shadow:inset 0 2px 2px -2px #ffffff;cursor:move;}
.Form-Scrbox{position:absolute;left:100px;top:0px;bottom:0px;right:0px;cursor:pointer;}
.Form-Scroll:hover,.Form-Left:hover,.Form-Right:hover{box-shadow:inset 0 0px 3px 1px #0053b1;}
.Form .Form-Select{max-height:216px;overflow:auto;position:absolute;top:34px;left:0px;right:0px;display:none;list-style-type:none;transition:all 0.2s linear;background:rgba(0,0,0,0.8);border:1px solid #000000;padding:2px;box-shadow: 0 0px 3px 1px #0053b1;border-radius:3px;}
.Form .open{display:block;z-index: 200;}
.Form-Select li{height:20px;cursor:pointer;display:block;transition:all 0.2s linear;border:1px solid #000000;border-width:1px 1px 0px 1px;margin:0px;padding:5px;}
.Form-Select li:last-child{border-width:1px;}
.Form-Select .enabled:hover{box-shadow:inset 6px 0px 0px -3px #ffffff,inset 0 0px 3px 1px #0053b1;}
.Form-Select .enabled{background:#363636 linear-gradient(#363636 0%,#1d1d1d 100%);}
.Form-Select .selected{background:#0078ff linear-gradient(#6cb1ff 0%,#0078ff 100%);box-shadow:inset 6px 0px 0px -3px #ffffff,inset 0 2px 2px -2px #ffffff;}
.Form-Select .disabled{background:#b9b9b9;color:#818181;cursor:default;}
.FormGroup{margin:10px;}
.FormGroup .Form{float:left;margin:0;}
.FormGroup .Form .Form-Name{border-radius:0px;border-width:1px 0px 1px 1px;}
.FormGroup .Form:first-child .Form-Name{border-radius:3px 0px 0px 3px;}
.FormGroup .Form:last-child .Form-Name{border-width:1px;border-radius:0px 3px 3px 0px;}function docSel(e){document.ondragstart=document.onmousedown=document.onselectstart=function(){return e;}}
function Form(){
$('input[data!=input],select[data!=input]').each(function(){var min,max,step,T,E,hh,mm,ww,l,v,type;
function a(d){return T.attr(d);}
function n(d){return Number(d);}
function mms(){min=n(a("min"));if(!min){a({'min':'0'});min=0;}max=n(a("max"));if(!max){a({'max':'100'});max=100;}step=n(a("step"));if(!step){a({'step':'1'});step=1;}}
T=$(this);E=T.parent('label');type=a("type");
if(type!='hidden' && type!='image'){
if(E.length<1){E=$('<label></label>');T.after(E);E.prepend(T);}T.detach();
var text=E.html(),
name=$('<div class="Form-Name"></div>'),
right=$('<div class="Form-Right"></div>'),
left=$('<div class="Form-Left"></div>'),
scb=$('<div class="Form-Scrbox"></div>'),
scr=$('<div class="Form-Scroll"></div>'),
opt=$("<ul class='Form-Select'></ul>");
E.text('');
E.prepend(T);
T.attr({"data":"input"});
E.addClass('Form');
}
if(type=='radio'||type=='checkbox'){
name.html(text);
E.append(name);
}else if(type=='file'){
name.html(T.val()||text||'-');
E.append(name).append(right);
right.html('Обзор');
T.change(function(){name.html(T.val().replace(/.+[\\\/]/,''));});
}else if(type=='number'){mms();
E.append(name).append(right).append(left);
right.html('+').on('click',function(){v=n(T.val())+step;if(v<=max){T.val(v).change();}});
left.html('-').on('click',function(){v=n(T.val())-step;if(v>=min){T.val(v).change();}});
T.change(function(){name.html(text+T.val());}).change();
}else if(type=='range'){mms();
E.append(name).append(scb);scb.append(scr);
mm=Math.abs(max-min);ww=100/(mm/step);
T.change(function(){scr.html(text+T.val());scr.css({'left':((Math.abs(min-n(T.val()))*100)/mm)+'%'});}).change();
scr.width(scr.width()+20);
hh=scr.outerWidth(true);
E.css({'min-width':(hh+(hh/2))+'px'});
scb.css({'left':(hh/2)+'px','right':(hh/2)+'px'});
scr.css({'margin-left':'-'+(hh/2)+'px'});
function move(e){l=((e.pageX-scb.offset().left)*100)/scb.innerWidth();if(l<0){l=0;}else if(l>100){l=100;}v=Math.round(l/ww)*step+min;T.val(v).change();}
E.on('mousedown',function(e){move(e);docSel(false);E.on('mousemove',function(e){move(e);});E.on('mouseup mouseleave',function(e){E.unbind('mousemove mouseup mouseleave');docSel(true);return false;});});
}else if(T.is('select')){
E.append(name).append(right).append(opt);right.html('▼');
function sclick(n){n.on('click',function(){if(opt.hasClass('open')){opt.removeClass('open');}else{$('.Form-Select').removeClass('open');opt.addClass('open');}});}
sclick(name);sclick(right);T.change(function(){opt.empty();var tt='';
T.find('option').each(function(){var Se=$(this),option=$("<li>"+Se.html()+"</li>");
if(Se.prop('selected')){option.addClass('selected');tt +=Se.html()+', ';}
if(Se.prop('disabled')){option.addClass('disabled');}else{option.addClass('enabled');}
opt.append(option);
option.on('click',function(){if(!Se.prop('disabled')){if(!T.prop('multiple')){Se.prop({"selected":true});opt.toggleClass('open');}else{if(Se.prop('selected')){Se.prop({"selected":false});}else{Se.prop({"selected":true});}}}T.change();});
});name.text(text+tt.replace(/[, ]+$/g,''));}).change();
}
});
}
$(document).ready(function(){
Form();
});
External CSS
This Pen doesn't use any external CSS resources.