JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<form class="jNice">
<select class="jNiceHidden" id="select" name="select"> <option value="" selected="selected">Выберите</option>
<option value="1">Значение 1</option>
<option value="2">Значение 2</option>
<option value="3">Значение 3</option>
<option value="4">Значение 4</option>
<option value="5">Значение 5</option>
<option value="6">Значение 6</option>
<option value="7">Значение 7</option>
<option value="8">Значение 8</option>
<option value="9">Значение 9, делаем длинное описание для проверки</option>
<option value="10">Значение 10</option></select>
</form>
</body>
</html>
CSS
.jNiceInputWrapper {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(input_left.gif) no-repeat left top; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 23px}
.jNiceInputInner {PADDING-RIGHT: 4px; PADDING-LEFT: 0px; BACKGROUND: url(input_right.gif) no-repeat right top; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 0px 4px; PADDING-TOP: 2px}
.jNiceInputInner DIV {HEIGHT: 19px;}
.jNiceInputInner INPUT {BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: middle; COLOR: #404040; LINE-HEIGHT: 18px; PADDING-TOP: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 17px; BORDER-RIGHT-WIDTH: 0px}
.jNiceSafari .jNiceInputInner DIV {OVERFLOW: hidden; POSITION: relative}
.jNiceSafari INPUT {LEFT: -4px; POSITION: absolute; TOP: -2px; HEIGHT: 26px}
.jRadioWrapper {FLOAT: left}
.jNiceRadio {DISPLAY: block; BACKGROUND: url(radio.gif) no-repeat center top; VERTICAL-ALIGN: middle; WIDTH: 18px; HEIGHT: 18px}
.jNiceCheckbox {DISPLAY: block; BACKGROUND: url(checkbox.gif) no-repeat center top; VERTICAL-ALIGN: middle; WIDTH: 18px; HEIGHT: 18px}
.jNiceChecked {BACKGROUND-POSITION: center bottom}
.jNiceSelectWrapper {WIDTH: 132px; POSITION: relative; HEIGHT: 17px}
.jNiceSelectWrapper DIV SPAN {BORDER-RIGHT: #cccccc 1px; PADDING-RIGHT: 3px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 3px; FLOAT: none; PADDING-BOTTOM: 0px; OVERFLOW: hidden; BORDER-LEFT: #cccccc 1px solid; WIDTH: 104px; LINE-HEIGHT: 15px; PADDING-TOP: 0px; BORDER-BOTTOM: #cccccc 1px solid; POSITION: absolute; HEIGHT: 15px}
.jNiceSelectWrapper DIV A { DISPLAY: block; RIGHT: 0px; BACKGROUND: url(select_right.gif) no-repeat center center; WIDTH: 21px; POSITION: absolute; HEIGHT: 17px}
.jNiceSelectWrapper UL {BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ccc 1px solid; OVERFLOW-Y: auto; DISPLAY: none; PADDING-LEFT: 0px; Z-INDEX: 100; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px;...
JavaScript
/*
* UPDATED: 12.19.07
*
******************************************** */
(function($){
$.fn.jNice = function(options){
var self = this;
var safari = $.browser.safari; /* We need to check for safari to fix the input:text problem */
/* each form */
this.each(function(){
/***************************
Buttons
***************************/
var setButton = function(){
$(this).replaceWith('<button id="'+ this.id +'" name="'+ this.name +'" type="'+ this.type +'" class="'+ this.className +'"><span><span>'+ $(this).attr('value') +'</span></span>');
};
$('input:submit, input:reset', this).each(setButton);
/***************************
Text Fields
***************************/
var setText = function(){
var $input = $(this);
$input.addClass("jNiceInput").wrap('<div class="jNiceInputWrapper"><div class="jNiceInputInner"><div></div></div></div>');
var $wrapper = $input.parents('div.jNiceInputWrapper');
$wrapper.css("width", $(this).width()+10);
$input.focus(function(){
$wrapper.addClass("jNiceInputWrapper_hover");
}).blur(function(){
$wrapper.removeClass("jNiceInputWrapper_hover");
});
};
$('input:text:visible, input:password', this).each(setText);
/* If this is safari we need to add an extra class */
if (safari){$('.jNiceInputWrapper').each(function(){$(this).addClass('jNiceSafari').find('input').css('width', $(this).width()+11);});}
/***************************
Check Boxes
***************************/
$('input:checkbox', this).each(function(){
$(this).addClass('jNiceHidden').wrap('<span></span>');
...