вывод картинки в select

273
17 ноября 2018, 06:40

есть форма , использую jquery для стилизации jquery.fs.selecter.min.js как мне вывести картинку?

<form action="">
    <select name="" id="">
        <option data-path="img/rev1.png" value="">1</option>
        <option data-path="img/rev2.png" value="">2</option>
    </select>

(function(e,t){"use strict";function l(t){t=e.extend({},a,t||{});if(u===null){u=e("body")}var n=e(this);for(var r=0,i=n.length;r<i;r++){c(n.eq(r),t)}return n}function c(t,r){if(!t.hasClass("selecter-element")){r=e.extend({},r,t.data("selecter-options"));r.multiple=t.prop("multiple");r.disabled=t.is(":disabled");if(r.external){r.links=true}var i=t.find("[selected]").not(":disabled"),o=t.find("option").index(i);if(!r.multiple&&r.label!==""){t.prepend('<option value="" class="selecter-placeholder" selected>'+r.label+"</option>");if(o>-1){o++}}else{r.label=""}var u=t.find("option, optgroup"),a=u.filter("option");if(!i.length){i=a.eq(0)}var f=o>-1?o:0,l=r.label!==""?r.label:i.text(),c="div";r.tabIndex=t[0].tabIndex;t[0].tabIndex=-1;var d="",v="";v+="<"+c+' class="selecter '+r.customClass;if(s){v+=" mobile"}else if(r.cover){v+=" cover"}if(r.multiple){v+=" multiple"}else{v+=" closed"}if(r.disabled){v+=" disabled"}v+='" tabindex="'+r.tabIndex+'">';v+="</"+c+">";if(!r.multiple){d+='<span class="selecter-selected">';d+=e("<span></span>").text(A(l,r.trim)).html();d+="</span>"}d+='<div class="selecter-options">';d+="</div>";t.addClass("selecter-element").wrap(v).after(d);var g=t.parent(".selecter"),y=e.extend({$select:t,$allOptions:u,$options:a,$selecter:g,$selected:g.find(".selecter-selected"),$itemsWrapper:g.find(".selecter-options"),index:-1,guid:n++},r);h(y);if(!y.multiple){N(f,y)}if(e.fn.scroller!==undefined){y.$itemsWrapper.scroller()}y.$selecter.on("touchstart.selecter",".selecter-selected",y,p).on("click.selecter",".selecter-selected",y,m).on("click.selecter",".selecter-item",y,w).on("close.selecter",y,b).data("selecter",y);y.$select.on("change.selecter",y,E);if(!s){y.$selecter.on("focusin.selecter",y,S).on("blur.selecter",y,x);y.$select.on("focusin.selecter",y,function(e){e.data.$selecter.trigger("focus")})}}}function h(t){var n="",r=t.links?"a":"span",i=0;for(var s=0,o=t.$allOptions.length;s<o;s++){var u=t.$allOptions.eq(s);if(u[0].tagName==="OPTGROUP"){n+='<span class="selecter-group';if(u.is(":disabled")){n+=" disabled"}n+='">'+u.attr("label")+"</span>"}else{var a=u.val();if(!u.attr("value")){u.attr("value",a)}n+="<"+r+' class="selecter-item';if(u.hasClass("selecter-placeholder")){n+=" placeholder"}if(u.is(":selected")){n+=" selected"}if(u.is(":disabled")){n+=" disabled"}n+='" ';if(t.links){n+='href="'+a+'"'}else{n+='data-value="'+a+'"'}n+=">"+e("<span></span>").text(A(u.text(),t.trim)).html()+"</"+r+">";i++}}t.$itemsWrapper.html(n);t.$items=t.$selecter.find(".selecter-item")}function p(e){e.stopPropagation();var t=e.data;t.touchStartEvent=e.originalEvent;t.touchStartX=t.touchStartEvent.touches[0].clientX;t.touchStartY=t.touchStartEvent.touches[0].clientY;t.$selecter.on("touchmove.selecter",".selecter-selected",t,d).on("touchend.selecter",".selecter-selected",t,v)}function d(e){var t=e.data,n=e.originalEvent;if(Math.abs(n.touches[0].clientX-t.touchStartX)>10||Math.abs(n.touches[0].clientY-t.touchStartY)>10){t.$selecter.off("touchmove.selecter touchend.selecter")}}function v(e){var t=e.data;t.touchStartEvent.preventDefault();t.$selecter.off("touchmove.selecter touchend.selecter");m(e)}function m(n){n.preventDefault();n.stopPropagation();var r=n.data;if(!r.$select.is(":disabled")){e(".selecter").not(r.$selecter).trigger("close.selecter",[r]);if(!r.mobile&&s&&!o){var i=r.$select[0];if(t.document.createEvent){var u=t.document.createEvent("MouseEvents");u.initMouseEvent("mousedown",false,true,t,0,0,0,0,0,false,false,false,false,0,null);i.dispatchEvent(u)}else if(i.fireEvent){i.fireEvent("onmousedown")}}else{if(r.$selecter.hasClass("closed")){g(n)}else if(r.$selecter.hasClass("open")){b(n)}}}}function g(e){e.preventDefault();e.stopPropagation();var t=e.data;if(!t.$selecter.hasClass("open")){var n=t.$selecter.offset(),r=u.outerHeight(),i=t.$itemsWrapper.outerHeight(true),s=t.index>=0?t.$items.eq(t.index).position():{left:0,top:0};if(n.top+i>r){t.$selecter.addClass("bottom")}t.$itemsWrapper.show();t.$selecter.removeClass("closed").addClass("open");u.on("click.selecter-"+t.guid,":not(.selecter-options)",t,y);C(t)}}function y(t){t.preventDefault();t.stopPropagation();if(e(t.currentTarget).parents(".selecter").length===0){b(t)}}function b(e){e.preventDefault();e.stopPropagation();var t=e.data;if(t.$selecter.hasClass("open")){t.$itemsWrapper.hide();t.$selecter.removeClass("open bottom").addClass("closed");u.off(".selecter-"+t.guid)}}function w(t){t.preventDefault();t.stopPropagation();var n=e(this),r=t.data;if(!r.$select.is(":disabled")){if(r.$itemsWrapper.is(":visible")){var i=r.$items.index(n);if(i!==r.index){N(i,r);k(r)}}if(!r.multiple){b(t)}}}function E(t,n){var r=e(this),i=t.data;if(!n&&!i.multiple){var s=i.$options.index(i.$options.filter("[value='"+O(r.val())+"']"));N(s,i);k(i)}}function S(t){t.preventDefault();t.stopPropagation();var n=t.data;if(!n.$select.is(":disabled")&&!n.multiple){n.$selecter.addClass("focus").on("keydown.selecter-"+n.guid,n,T);e(".selecter").not(n.$selecter).trigger("close.selecter",[n])}}function x(e,t,n){e.preventDefault();e.stopPropagation();var r=e.data;r.$selecter.removeClass("focus").off("keydown.selecter-"+r.guid);if(r.$selecter.hasClass("open")){b(e);N(r.index,r)}k(r)}function T(t){var n=t.data;if(t.keyCode===13){if(n.$selecter.hasClass("open")){b(t);N(n.index,n)}k(n)}else if(t.keyCode!==9&&!t.metaKey&&!t.altKey&&!t.ctrlKey&&!t.shiftKey){t.preventDefault();t.stopPropagation();var r=n.$items.length-1,s=n.index<0?0:n.index;if(e.inArray(t.keyCode,i?[38,40,37,39]:[38,40])>-1){s=s+(t.keyCode===38||i&&t.keyCode===37?-1:1);if(s<0){s=0}if(s>r){s=r}}else{var o=String.fromCharCode(t.keyCode).toUpperCase(),u,a;for(a=n.index+1;a<=r;a++){u=n.$options.eq(a).text().charAt(0).toUpperCase();if(u===o){s=a;break}}if(s<0||s===n.index){for(a=0;a<=r;a++){u=n.$options.eq(a).text().charAt(0).toUpperCase();if(u===o){s=a;break}}}}if(s>=0){N(s,n);C(n)}}}function N(e,t){var n=t.$items.eq(e),r=n.hasClass("selected"),i=n.hasClass("disabled");if(!i){if(t.multiple){if(r){t.$options.eq(e).prop("selected",null);n.removeClass("selected")}else{t.$options.eq(e).prop("selected",true);n.addClass("selected")}}else if(e>-1&&e<t.$items.length){var s=n.html(),o=n.data("value");t.$selected.html(s).removeClass("placeholder");t.$items.filter(".selected").removeClass("selected");t.$select[0].selectedIndex=e;n.addClass("selected");t.index=e}else if(t.label!==""){t.$selected.html(t.label)}}}function C(t){var n=t.$items.eq(t.index),r=t.index>=0&&!n.hasClass("placeholder")?n.position():{left:0,top:0};if(e.fn.scroller!==undefined){t.$itemsWrapper.scroller("scroll",t.$itemsWrapper.find(".scroller-content").scrollTop()+r.top,0).scroller("reset")}else{t.$itemsWrapper.scrollTop(t.$itemsWrapper.scrollTop()+r.top)}}function k(e){if(e.links){L(e)}else{e.callback.call(e.$selecter,e.$select.val(),e.index);e.$select.trigger("change",[true])}}function L(e){var n=e.$select.val();if(e.external){t.open(n)}else{t.location.href=n}}function A(e,t){if(t===0){return e}else{if(e.length>t){return e.substring(0,t)+"..."}else{return e}}}function O(e){return typeof e==="string"?e.replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g,"\\$1"):e}var n=0,r=t.navigator.userAgent||t.navigator.vendor||t.opera,i=/Firefox/i.test(r),s=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(r),o=i&&s,u=null;var a={callback:e.noop,cover:false,customClass:"",label:"",external:false,links:false,mobile:false,trim:0};var f={defaults:function(t){a=e.extend(a,t||{});return e(this)},disable:function(t){return e(this).each(function(n,r){var i=e(r).parent(".selecter").data("selecter");if(i){if(typeof t!=="undefined"){var s=i.$items.index(i.$items.filter("[data-value="+t+"]"));i.$items.eq(s).addClass("disabled");i.$options.eq(s).prop("disabled",true)}else{if(i.$selecter.hasClass("open")){i.$selecter.find(".selecter-selected").trigger("click.selecter")}i.$selecter.addClass("disabled");i.$select.prop("disabled",true)}}})},destroy:function(){return e(this).each(function(t,n){var r=e(n).parent(".selecter").data("selecter");if(r){if(r.$selecter.hasClass("open")){r.$selecter.find(".selecter-selected").trigger("click.selecter")}if(e.fn.scroller!==undefined){r.$selecter.find(".selecter-options").scroller("destroy")}r.$select[0].tabIndex=r.tabIndex;r.$select.find(".selecter-placeholder").remove();r.$selected.remove();r.$itemsWrapper.remove();r.$selecter.off(".selecter");r.$select.off(".selecter").removeClass("selecter-element").show().unwrap()}})},enable:function(t){return e(this).each(function(n,r){var i=e(r).parent(".selecter").data("selecter");if(i){if(typeof t!=="undefined"){var s=i.$items.index(i.$items.filter("[data-value="+t+"]"));i.$items.eq(s).removeClass("disabled");i.$options.eq(s).prop("disabled",false)}else{i.$selecter.removeClass("disabled");i.$select.prop("disabled",false)}}})},refresh:function(){return f.update.apply(e(this))},update:function(){return e(this).each(function(t,n){var r=e(n).parent(".selecter").data("selecter");if(r){var i=r.index;r.$allOptions=r.$select.find("option, optgroup");r.$options=r.$allOptions.filter("option");r.index=-1;i=r.$options.index(r.$options.filter(":selected"));h(r);if(!r.multiple){N(i,r)}}})}};e.fn.selecter=function(e){if(f[e]){return f[e].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof e==="object"||!e){return l.apply(this,arguments)}return this};e.selecter=function(e){if(e==="defaults"){f.defaults.apply(this,Array.prototype.slice.call(arguments,1))}}})(jQuery,window) 
window.Modernizr=function(a,b,c){function d(a){t.cssText=a}function e(a,b){return d(v.join(a+";")+(b||""))}function f(a,b){return typeof a===b}function g(a,b){return!!~(""+a).indexOf(b)}function h(a,b){for(var d in a){var e=a[d];if(!g(e,"-")&&t[e]!==c)return"pfx"==b?e:!0}return!1}function i(a,b,d){for(var e in a){var g=b[a[e]];if(g!==c)return d===!1?a[e]:f(g,"function")?g.bind(d||b):g}return!1}function j(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+x.join(d+" ")+d).split(" ");return f(b,"string")||f(b,"undefined")?h(e,b):(e=(a+" "+y.join(d+" ")+d).split(" "),i(e,b,c))}var k,l,m,n="2.8.3",o={},p=!0,q=b.documentElement,r="modernizr",s=b.createElement(r),t=s.style,u=":)",v=({}.toString," -webkit- -moz- -o- -ms- ".split(" ")),w="Webkit Moz O ms",x=w.split(" "),y=w.toLowerCase().split(" "),z={svg:"http://www.w3.org/2000/svg"},A={},B=[],C=B.slice,D=function(a,c,d,e){var f,g,h,i,j=b.createElement("div"),k=b.body,l=k||b.createElement("body");if(parseInt(d,10))for(;d--;)h=b.createElement("div"),h.id=e?e[d]:r+(d+1),j.appendChild(h);return f=["&#173;",'<style id="s',r,'">',a,"</style>"].join(""),j.id=r,(k?j:l).innerHTML+=f,l.appendChild(j),k||(l.style.background="",l.style.overflow="hidden",i=q.style.overflow,q.style.overflow="hidden",q.appendChild(l)),g=c(j,a),k?j.parentNode.removeChild(j):(l.parentNode.removeChild(l),q.style.overflow=i),!!g},E={}.hasOwnProperty;m=f(E,"undefined")||f(E.call,"undefined")?function(a,b){return b in a&&f(a.constructor.prototype[b],"undefined")}:function(a,b){return E.call(a,b)},Function.prototype.bind||(Function.prototype.bind=function(a){var b=this;if("function"!=typeof b)throw new TypeError;var c=C.call(arguments,1),d=function(){if(this instanceof d){var e=function(){};e.prototype=b.prototype;var f=new e,g=b.apply(f,c.concat(C.call(arguments)));return Object(g)===g?g:f}return b.apply(a,c.concat(C.call(arguments)))};return d}),A.flexbox=function(){return j("flexWrap")},A.flexboxlegacy=function(){return j("boxDirection")},A.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:D(["@media (",v.join("touch-enabled),("),r,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=9===a.offsetTop}),c},A.history=function(){return!!a.history&&!!history.pushState},A.rgba=function(){return d("background-color:rgba(150,255,150,.5)"),g(t.backgroundColor,"rgba")},A.multiplebgs=function(){return d("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(t.background)},A.backgroundsize=function(){return j("backgroundSize")},A.opacity=function(){return e("opacity:.55"),/^0.55$/.test(t.opacity)},A.cssanimations=function(){return j("animationName")},A.csscolumns=function(){return j("columnCount")},A.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return d((a+"-webkit- ".split(" ").join(b+a)+v.join(c+a)).slice(0,-a.length)),g(t.backgroundImage,"gradient")},A.csstransforms=function(){return!!j("transform")},A.csstransforms3d=function(){var a=!!j("perspective");return a&&"webkitPerspective"in q.style&&D("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b){a=9===b.offsetLeft&&3===b.offsetHeight}),a},A.csstransitions=function(){return j("transition")},A.generatedcontent=function(){var a;return D(["#",r,"{font:0/0 a}#",r,':after{content:"',u,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},A.video=function(){var a=b.createElement("video"),c=!1;try{(c=!!a.canPlayType)&&(c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,""))}catch(d){}return c},A.audio=function(){var a=b.createElement("audio"),c=!1;try{(c=!!a.canPlayType)&&(c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,""))}catch(d){}return c},A.svg=function(){return!!b.createElementNS&&!!b.createElementNS(z.svg,"svg").createSVGRect};for(var F in A)m(A,F)&&(l=F.toLowerCase(),o[l]=A[F](),B.push((o[l]?"":"no-")+l));return o.addTest=function(a,b){if("object"==typeof a)for(var d in a)m(a,d)&&o.addTest(d,a[d]);else{if(a=a.toLowerCase(),o[a]!==c)return o;b="function"==typeof b?b():b,"undefined"!=typeof p&&p&&(q.className+=" "+(b?"":"no-")+a),o[a]=b}return o},d(""),s=k=null,o._version=n,o._prefixes=v,o._domPrefixes=y,o._cssomPrefixes=x,o.testProp=function(a){return h([a])},o.testAllProps=j,o.testStyles=D,q.className=q.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(p?" js "+B.join(" "):""),o}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==q.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=r.shift();s=1,a?a.t?o(function(){("c"==a.t?m.injectCss:m.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):s=0}function i(a,c,d,e,f,i,j){function k(b){if(!n&&g(l.readyState)&&(t.r=n=1,!s&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&o(function(){v.removeChild(l)},50);for(var d in A[c])A[c].hasOwnProperty(d)&&A[c][d].onload()}}var j=j||m.errorTimeout,l=b.createElement(a),n=0,q=0,t={t:d,s:c,e:f,a:i,x:j};1===A[c]&&(q=1,A[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,q)},r.splice(e,0,t),"img"!=a&&(q||2===A[c]?(v.insertBefore(l,u?null:p),o(k,j)):A[c].push(l))}function j(a,b,c,d,f){return s=0,b=b||"j",e(a)?i("c"==b?x:w,a,b,this.i++,c,d,f):(r.splice(this.i++,0,a),1==r.length&&h()),this}function k(){var a=m;return a.loader={load:j,i:0},a}var l,m,n=b.documentElement,o=a.setTimeout,p=b.getElementsByTagName("script")[0],q={}.toString,r=[],s=0,t="MozAppearance"in n.style,u=t&&!!b.createRange().compareNode,v=u?n:p.parentNode,n=a.opera&&"[object Opera]"==q.call(a.opera),n=!!b.attachEvent&&!n,w=t?"object":n?"script":"img",x=n?"script":w,y=Array.isArray||function(a){return"[object Array]"==q.call(a)},z=[],A={},B={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}};m=function(a){function b(a){var b,c,d,a=a.split("!"),e=z.length,f=a.pop(),g=a.length,f={url:f,origUrl:f,prefixes:a};for(c=0;g>c;c++)d=a[c].split("="),(b=B[d.shift()])&&(f=b(f,d));for(c=0;e>c;c++)f=z[c](f);return f}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(A[i.url]?i.noexec=!0:A[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),A[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(l=function(){var a=[].slice.call(arguments);m.apply(this,a),n()}),g(a,l,b,0,j);else if(Object(a)===a)for(i in h=function(){var b,c=0;for(b in a)a.hasOwnProperty(b)&&c++;return c}(),a)a.hasOwnProperty(i)&&(!c&&!--h&&(d(l)?l=function(){var a=[].slice.call(arguments);m.apply(this,a),n()}:l[i]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),n()}}(m[i])),g(a[i],l,b,i,j))}else!c&&n()}var h,i,j=!!a.test,k=a.load||a.both,l=a.callback||f,m=l,n=a.complete||f;c(j?a.yep:a.nope,!!k),k&&c(k)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(y(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):y(j)?m(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},m.addPrefix=function(a,b){B[a]=b},m.addFilter=function(a){z.push(a)},m.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",l=function(){b.removeEventListener("DOMContentLoaded",l,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k,l,n=b.createElement("script"),e=e||m.errorTimeout;n.src=a;for(l in d)n.setAttribute(l,d[l]);c=j?h:c||f,n.onreadystatechange=n.onload=function(){!k&&g(n.readyState)&&(k=1,c(),n.onload=n.onreadystatechange=null)},o(function(){k||(k=1,c(1))},e),i?n.onload():p.parentNode.insertBefore(n,p)},a.yepnope.injectCss=function(a,c,d,e,g,i){var j,e=b.createElement("link"),c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(p.parentNode.insertBefore(e,p),o(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))},Modernizr.addTest("pointerevents",function(){var a,b=document.createElement("x"),c=document.documentElement,d=window.getComputedStyle;return"pointerEvents"in b.style?(b.style.pointerEvents="auto",b.style.pointerEvents="x",c.appendChild(b),a=d&&"auto"===d(b,"").pointerEvents,c.removeChild(b),!!a):!1}); 
$(document).ready(function(){ 
		$("select").selecter(); 
	});
/*  
 * Selecter v3.2.3 - 2014-10-24  
 * A jQuery plugin for replacing default select elements. Part of the Formstone Library.  
 * http://formstone.it/selecter/  
 *  
 * Copyright 2014 Ben Plum; MIT Licensed  
 */ 
 
 
.selecter { 
  position: relative; 
  display: block; 
  z-index: 1; 
  max-width: 100%; 
} 
.selecter:focus { 
  box-shadow: none; 
  outline: none; 
} 
.selecter, 
.selecter * { 
  -webkit-user-select: none !important; 
     -moz-user-select: none !important; 
      -ms-user-select: none !important; 
          user-select: none !important; 
} 
.selecter, 
.selecter *, 
.selecter *:before, 
.selecter *:after { 
  -moz-box-sizing: border-box; 
       box-sizing: border-box; 
} 
.selecter-element { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0; 
  opacity: 0; 
  z-index: -1; 
} 
.selecter-element, 
.selecter-element:focus { 
  outline: none; 
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
  -webkit-tap-highlight-color: transparent; 
} 
.no-opacity .selecter-element { 
  left: -999999px; 
} 
.selecter-selected { 
    position: relative; 
    background-color: #f5f5f5; 
    color: #757575; 
    cursor: pointer; 
    margin: 0; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    height: 55px; 
    border-radius: 10px; 
    padding: 0 15px; 
    text-overflow: clip; 
    z-index: 2; 
} 
.no-touch .selecter-selected:hover { 
  color: #333333; 
} 
.no-touch .selecter.disabled .selecter-selected:hover { 
  color: #cccccc; 
} 
.selecter-options { 
  width: 100%; 
  max-height: 260px; 
  position: absolute; 
  top: 100%; 
  left: 0; 
  background-color: #ffffff; 
  display: none; 
  margin: 0; 
  overflow: auto; 
  overflow-x: hidden; 
  padding: 0; 
  z-index: 50; 
  border-radius: 0 0 10px 10px; 
} 
.selecter-options.scroller { 
  position: absolute; 
} 
.no-opacity .selecter-options { 
  width: auto; 
} 
.selecter-group { 
  border-bottom: 1px solid #cccccc; 
  color: #999999; 
  display: block; 
  font-size: 11px; 
  padding: 10px 15px; 
  text-transform: uppercase; 
} 
.selecter-item { 
    width: 100%; 
    background: #f5f5f5; 
    color: #757575; 
    cursor: pointer; 
    display: flex; 
    height: 55px; 
    line-height: 55px; 
    padding: 0 15px; 
    font-size: 16px; 
    margin: 0; 
    overflow: hidden; 
    text-decoration: none; 
    text-overflow: ellipsis; 
} 
.selecter-item.placeholder { 
  display: none; 
} 
.selecter-item.selected { 
  background: #eeeeee; 
} 
.selecter-item.disabled { 
  color: #999999; 
  cursor: default; 
} 
.selecter-item:first-child { 
  border-radius: 0; 
} 
.selecter-item:last-child { 
  border-bottom: 0; 
  border-radius: 0 0 10px 10px; 
} 
.no-touch .selecter-item:hover, 
.no-touch .selecter-item.selected:hover { 
  color: #fff; 
  background-color: #006151; 
} 
.selecter-item.disabled, 
.no-touch .selecter-item.disabled:hover { 
  color: #cccccc; 
  background-color: #ffffff; 
} 
.selecter.open { 
  z-index: 3; 
} 
.selecter.open .selecter-selected { 
  z-index: 51; 
  border-radius: 3px 3px 0 0; 
} 
.selecter.open .selecter-selected, 
.selecter.focus .selecter-selected { 
  background-color: #ffffff; 
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
} 
.selecter.cover .selecter-options { 
  border-width: 1px; 
  top: 0; 
  border-radius: 3px; 
} 
.selecter.cover .selecter-options .selecter-item.first { 
  border-radius: 3px 3px 0 0; 
} 
.selecter.cover.open .selecter-selected { 
  z-index: 49; 
  border-radius: 3px 3px 0 0; 
} 
.selecter.bottom .selecter-options { 
  top: auto; 
  bottom: 100%; 
  border-width: 1px 1px 0; 
} 
.selecter.bottom .selecter-item:last-child { 
  border: none; 
} 
.selecter.bottom.open .selecter-selected { 
  border-radius: 0 0 3px 3px; 
} 
.selecter.bottom.open .selecter-options { 
  border-radius: 3px 3px 0 0; 
} 
.selecter.bottom .cover .selecter-options { 
  top: auto; 
  bottom: 0; 
} 
.selecter.bottom .cover.open .selecter-selected { 
  border-radius: 3px; 
} 
.selecter.bottom .cover.open .selecter-options { 
  border-radius: 3px; 
} 
.selecter.multiple .selecter-options { 
  width: 100%; 
  position: static; 
  border-width: 1px; 
  display: block; 
  border-radius: 3px; 
  box-shadow: none; 
} 
.selecter.disabled .selecter-selected { 
  background: #ffffff; 
  border-color: #cccccc; 
  color: #cccccc; 
  cursor: default; 
} 
.selecter.disabled .selecter-options { 
  background: #ffffff; 
  border-color: #cccccc; 
} 
.selecter.disabled .selecter-group, 
.selecter.disabled .selecter-item { 
  border-color: #cccccc; 
  color: #cccccc; 
  cursor: default; 
} 
.selecter.disabled .selecter-item.selected, 
.no-touch .selecter.disabled .selecter-item.selected:hover { 
  background: #fafafa; 
} 
.selecter.disabled .selecter-item, 
.no-touch .selecter.disabled .selecter-item:hover { 
  color: #cccccc; 
  background-color: #ffffff; 
} 
.selecter-options.scroller { 
  overflow: hidden; 
} 
.selecter-options.scroller .scroller-content { 
  max-height: 260px; 
  padding: 0; 
} 
@media screen and (max-width: 740px) { 
  .selecter { 
    max-width: 40%; 
  } 
} 
@media screen and (max-width: 500px) { 
  .selecter { 
    max-width: 100%; 
  } 
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<form action=""> 
  <select name="" id=""> 
    <option data-path="img/rev1.png" value="">1</option> 
    <option data-path="img/rev2.png" value="">2</option> 
  </select> 
</form>

READ ALSO
fullcalendar проблема

fullcalendar проблема

Почему не отображает слева время?

169
Как соxранить введенные значения после редактирования html() элемента посредством js?

Как соxранить введенные значения после редактирования html() элемента посредством js?

Динамически добавляю и удаляю блоки (наборы текстовых полей) на страницеПосле удаления непоследнего элемента нарушается их нумерация

152
Имя не сущестует в данном контексте, хотя все существует

Имя не сущестует в данном контексте, хотя все существует

VS 2017 пишет, что capture не существует в текущем контекстеВ чем проблема?

224
Inspector для своего типа в Unity Editor

Inspector для своего типа в Unity Editor

Я так понимаю в инспекторе Unity не отображаются публичные поля с типом интерфейс? Например что то типо того

143