JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<script type="text/javascript">
    $(document).ready(function(){
      $('.select1').customStyle1();
    });
    </script>
<div class="ff">
<div class="tooltip_basket">
	<input type="text"  class="number"/>
    <select class="select1">
	<option value="">Коробки</option>
	<option value="">Коробки</option>
	<option value="">Коробки</option>
	<option value="">Коробки</option>
	<option value="">Коробки</option>
</select>
    <a href="" class="plus"></a>
</div>
</div>

CSS

.ff{
width:100px;
}
.select1 {
width: 100px;
height: 27px;
color: #000;
font: 13px Verdana,Tahoma, Arial, Helvetica;
text-align: left;
line-height:22px;
white-space: nowrap;
zoom: 1;
text-transform: none;
float:left;
margin-right:10px;
margin-top: 3px;
border: 0;
background: url(http://td-ust2.ustrong.ru/i/select.png) no-repeat;
}
.number{
width:38px;
height: 23px;
margin-top: 3px;
border: 1px solid #dadada;
text-align:center;
font: 13px Verdana,Tahoma, Arial, Helvetica;
line-height:22px;
float:left;
margin-right:10px;
color:#000;
}
.plus{
width:31px;
height:32px;
float:left;
    border:0;
    background: url(http://td-ust2.ustrong.ru/i/plus.png) no-repeat center #573c81;
    text-indent:-9999px;
}
.tooltip_basket{
border:1px solid #bfbfbf;
overflow:hidden;
padding:8px;
    width:191px;
}

JavaScript

$(function(){
 $.fn.extend({

 	customStyle1 : function(options) {
	  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
	  return this.each(function() {

			var currentSelected = $(this).find(':selected');
			$(this).after('<span class="select1"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
			var selectBoxSpan = $(this).next();
			var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));
			var selectBoxSpanInner = selectBoxSpan.find(':first-child');
			selectBoxSpan.css({display:'inline-block'});
			selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
			var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
			$(this).height(selectBoxHeight).change(function(){
				selectBoxSpanInner.text($('option:selected',this).text()).parent().addClass('changed');
			});

	  });
	  }
	}
 });
});