您有一个使用修改过的formstone选择器（http://classic.formstone.it/components/selecter）的网页。我需要帮助才能有两个不同的下拉宽度。请找我附上的zip文件。 https://drive.google.com/open?id=0B-gFK70FVA8eWGFQRXd6Rzl2aVk
search.html中有两个下拉列表。如果我将此行从60％修改为110％。我调整了两个下拉宽度。
.selecter{display:block;margin:0 0 5px;position:relative;width:60%;z-index:1}
我的问题是：我怎么能有两种不同的尺码？一个60％，另一个100％？
有一些潜在的基础，我不明白，但这可能是一个单独的问题，但无论如何我都会提到这里。 我不明白我的css课是如何选择＆＃34;选择＆＃34;但不知何故，它正在被转换为＆＃34; selecter＆＃34;通过某事（function.js或selecter.js）
这是我的HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HONDA</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="panel"></div>
<div id="wrap" class="clr">
<div id="search" class="clr">
<div id="search-inside" class="clr block">
<div id="tabs">
<div class="tab active">Search by Category and Type</div>
</div>
<div id="tab-contents" class="frst">
<div class="tab-content active">
<div class="thirds">
<div class="third">
<div class="srch-hdr">Category</div>
<div class="row clr">
<select class="select">
<option>Choose a Category</option>
<option>Second Category</option>
<option>Third Category</option>
<option>Third Category</option>
<option>1 LexusP HondaToyot - SubaruHondaMe Retrofit - Competitors LexusAcura</option>
</select>
</div>
<div class="srch-hdr">Honda type</div>
<div class="row clr">
<select class="select">
<option>Choose a Category</option>
<option>Second Category</option>
<option>Third Category</option>
<option>Fourth Category</option>
</select>
</div>
</div>
<div class="third">
</div>
<div class="third">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/selecter.js"></script>
<script src="js/functions.js"></script>
</body>
</html>
这是我的css：
@font-face{font-family:'BdCn';font-style:normal;font-weight:400;src:url('fonts/bdcn.otf')}
@font-face{font-family:'MdCn';font-style:normal;font-weight:400;src:url('fonts/mdcn.otf')}
@font-face{font-family:'Roman';font-style:normal;font-weight:400;src:url('fonts/roman.otf')}
body{background:#f0f8fc;color:#000;margin:0;padding:0;width:100%}
body,input,select,textarea{font:14px/20px 'Roman',Arial,sans-serif}
a{color:#095576}
:focus,img{border:none;outline:none}
#menu,#tabs,.selecter{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.lbl,.box,.radiolbl{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.clr{clear:both}.clr:after{clear:both;content:'';display:block;height:0}
.block{margin:0 auto;max-width:1366px;width:90%}
.blu{color:#0892cd}
#wrap{background:#fff}
#header{height:109px;overflow:hidden}
#menu{background:#54bee6;
background:-webkit-linear-gradient(top, #54bee6 0%,#0892cd 100%);
background:-moz-linear-gradient(top, #54bee6 0%,#0892cd 100%);
background:linear-gradient(top, #54bee6 0%,#0892cd 100%);
border-bottom:1px solid #0892cd;clear:both;height:46px;margin:0 0 2px}
.menu{display:block;list-style:none;margin:0;padding:0}
.menu-item{display:block;float:left}
.menu-item.active .menu-link,.menu-item:hover .menu-link{background:#809096;
background:-webkit-linear-gradient(top, #809096 0%,#60757e 100%);
background:-moz-linear-gradient(top, #809096 0%,#60757e 100%);
background:linear-gradient(top, #809096 0%,#60757e 100%)}
.menu-link{color:#fff;display:block;font:20px/30px 'MdCn',sans-serif;padding:8px 16px;text-decoration:none;text-transform:uppercase}
#main{background:url('images/main.jpg') 50% 0 no-repeat;background-size:cover;border-bottom:1px solid #1d9ad0;box-shadow:inset 0 -8px 8px -8px #1d9ad0;height:296px}
#main-inside{background:url('images/blueshadow.png') 0 0 no-repeat;overflow:hidden}
#main .main-heading{color:#fff;font:400 48px/50px 'BdCn',Arial,sans-serif;margin:68px 68px 0;text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.3)}
#main .main-text{color:#fff;font:400 18px/24px 'BdCn',Arial,sans-serif;margin:16px 68px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.link{background:url('images/main-arrws.png') 100% 50% no-repeat #62caec;box-shadow:0 1px 2px rgba(0,0,0,.2);float:left;margin:26px 68px;padding:9px 42px 7px 16px;text-shadow:none}
.link:hover{background-color:#7cd4f1}
#search{background:#0892cd;float:left;width:100%}
#search-inside{margin:10px auto}
#tabs{height:36px;overflow:hidden;width:100%}
.tab{background:#62caec;border-radius:5px 5px 0 0;color:#fff;cursor:pointer;float:left;font-size:14px;line-height:20px;margin-right:4px;padding:8px 26px;text-transform:uppercase}
.tab.active,.tab.active:hover{background:#fff;color:#555}
#tab-contents{background:#fff;border-radius:5px;box-shadow:0 5px 5px -5px rgba(0,0,0,.2);min-height:300px;margin:0;position:relative;z-index:2}
#tab-contents.frst{border-radius:0 5px 5px 5px}
.tab-content{display:none;padding:16px 26px}
.tab-content.active{display:block}
#tab-contents .row{margin:0 0 10px;width:80%}
.third{float:left;width:33.33%}
.srch-hdr{color:#62caec;font:400 18px/36px 'MdCn',Arial,sans-serif;text-transform:uppercase}
.lbl{float:left;font:400 15px 'MdCn',Arial,sans-serif;padding:4px 12px 3px 0;text-transform:uppercase;width:25%}
.box{background:#f0f0f0;border:none;border-radius:5px;color:#333;float:right;margin:0;padding:4px 12px 3px;width:75%}
.selecter-element{height:0;left:-999px;margin:20px 10px 0 !important;padding:0;position:absolute;opacity:0;width:0}
.selecter{display:block;margin:0 0 5px;position:relative;width:60%;z-index:1}
.selecter .selecter-selected{background:url('images/select.png') 100% 0 no-repeat #f0f0f0;border-radius:5px;color:#333;cursor:pointer;display:block;font-size:15px;margin:0;overflow:hidden;padding:4px 12px;position:relative;text-overflow:clip;z-index:49}
.selecter .selecter-options{background:#f0f0f0;border-radius:0 0 3px 3px;border-top:1px solid #e3e3e3;display:none;left:0;margin:0;max-height:252px;overflow:auto;overflow-x:hidden;padding:0;position:absolute;top:100%;width:100%;*width:auto;z-index:50}
.selecter .selecter-item{background:#f0f0f0;border-bottom:1px solid #e3e3e3;color:#333;cursor:pointer;display:block;font-size:15px;margin:0;overflow:hidden;padding:4px 12px 3px;text-overflow:ellipsis;width:100%}
.selecter .selecter-item:hover{background:#e9e9e9}
.selecter .selecter-item.selected{background:#e3e3e3}
.selecter .selecter-item:first-child{border-radius:0}
.selecter .selecter-item:last-child{border-radius:0 0 2px 2px;border-bottom:0}
.selecter.open{z-index:3}
.selecter.open .selecter-selected{background-position:100% -28px;border-radius:5px 5px 0 0;z-index:51}
.selecter.multiple .selecter-options{border-color:#ccc #ddd #eee;border-radius:5px;border-width:1px;box-shadow:none;display:block;position:static;width:100%}
.selecter.multiple .selecter-item:first-child{border-top:1px solid #ccc}
.selleft{margin-right:10px}
.lbl.lblmore{width:37.5%}
.box.boxmore{float:left;margin-right:2.5%;width:35%}
.lbl.lblless{width:10%}
.box.boxless{width:15%}
.checklbl{background:url('images/check.png') 0 0 no-repeat;cursor:pointer;margin-top:8px;padding:5px 0 5px 42px;width:100%}
.checklbl.chk{background-position:0 -28px}
.checklbl input{display:none;padding:0;width:0}
.radiolbl{background:url('images/radio.png') 0 0 no-repeat;cursor:pointer;padding:5px 0 5px 42px;width:100px}
.radiolbl.chk{background-position:0 -28px}
.radiolbl input{display:none;padding:0;width:0}
.pager{border-top:1px solid #ddd;margin:20px -6px 0;padding:10px 0 0}
.pager-item{color:#777;display:block;float:left;font:400 18px/36px 'MdCn',Arial,sans-serif;margin:0 1px;opacity:.6;text-align:center;text-decoration:none;width:36px}
.pager-left{background:url('images/pager.png') 0 50% no-repeat;height:36px;margin:0 3px}
.pager-right{background:url('images/pager.png') 100% 50% no-repeat;height:36px;margin:0 3px}
.pager-item:hover{opacity:1}
#results{background:#fff;padding:0 0 26px}
.res-link{background:#f0f0f0;border-radius:5px;color:#777;float:left;font-size:18px;margin:16px 16px 10px 0;padding:3px 10px 1px}
.res-link.active{background:#8ad5f0;color:#fff}
#results-count{color:#444;font:400 12px/20px 'Roman',Arial,sans-serif;margin:0 10px 10px}
.result{float:left;width:25%}
.result-cover{border:1px solid #ccc;margin:0 4px 8px;padding:0 0 6px}
.result-img{border:1px solid #ccc;height:auto;margin:9px;overflow:hidden}
.result-img img{display:block;margin:0;width:100%}
.result-title{color:#888;display:block;float:left;font:400 18px/24px 'MdCn',Arial,sans-serif;margin:0 9px 6px;text-decoration:none}
.result .row{background:#fff;font:400 16px/20px 'MdCn',Arial,sans-serif;height:18px;overflow:hidden;padding:0 10px;text-transform:uppercase}
.result .row.stripe{background:#f6f9fb}
.result .row:last-child{font-family:'BdCn',Arial,sans-serif}
.prop{color:#373736;float:left;width:40%}
.value{color:#0f92cb;float:right;width:60%}
这是我的function.js：
$(document).ready(function(){
$('.tab').click(function(){
var indx = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.tab-content').eq(indx).addClass('active').siblings().removeClass('active');
if(indx==0){$('#tab-contents').addClass('frst')}else{$('#tab-contents').removeClass('frst')}
});
$(".select").selecter();
$(".checklbl input:checked").parent().addClass('chk');
$(".checklbl input").change(function(){
if(this.checked){
$(this).parent().addClass('chk');
}else{
$(this).parent().removeClass('chk');
}
});
$(".radiolbl input:checked").parent().addClass('chk');
$(".radiolbl input").click(function(){
if(this.checked){
$(this).parent().addClass('chk');
$(this).parent().siblings().removeClass('chk');
}
});
$(".result .row:even").addClass('stripe');
});
这是我的selecter.js :(缩小版）
/*
* Selecter v3.0.6 - 2014-01-27
* A jQuery plugin for replacing default select elements. Part of the Formstone Library.
* http://formstone.it/selecter/
*
* Copyright 2014 Ben Plum; MIT Licensed
*/
!function(a,b){"use strict";function c(b){b=a.extend({},x,b||{}),null===w&&(w=a("body"));for(var c=a(this),e=0,f=c.length;f>e;e++)d(c.eq(e),b);return c}function d(b,c){if(!b.hasClass("selecter-element")){c=a.extend({},c,b.data("selecter-options")),c.external&&(c.links=!0);var d=b.find("option, optgroup"),g=d.filter("option"),h=g.filter(":selected"),n=""!==c.label?-1:g.index(h),p=c.links?"nav":"div";c.tabIndex=b[0].tabIndex,b[0].tabIndex=-1,c.multiple=b.prop("multiple"),c.disabled=b.is(":disabled");var q="<"+p+' class="selecter '+c.customClass;v?q+=" mobile":c.cover&&(q+=" cover"),q+=c.multiple?" multiple":" closed",c.disabled&&(q+=" disabled"),q+='" tabindex="'+c.tabIndex+'">',c.multiple||(q+='<span class="selecter-selected'+(""!==c.label?" placeholder":"")+'">',q+=a("<span></span").text(r(""!==c.label?c.label:h.text(),c.trim)).html(),q+="</span>"),q+='<div class="selecter-options">',q+="</div>",q+="</"+p+">",b.addClass("selecter-element").after(q);var s=b.next(".selecter"),u=a.extend({$select:b,$allOptions:d,$options:g,$selecter:s,$selected:s.find(".selecter-selected"),$itemsWrapper:s.find(".selecter-options"),index:-1,guid:t++},c);e(u),o(n,u),void 0!==a.fn.scroller&&u.$itemsWrapper.scroller(),u.$selecter.on("click.selecter",".selecter-selected",u,f).on("click.selecter",".selecter-item",u,j).on("close.selecter",u,i).data("selecter",u),u.$selecter.on("change.selecter",u,k).on("blur.selecter",u,m),v||u.$selecter.on("focus.selecter",u,l),u.$select.on("focus.selecter",u,function(a){a.data.$selecter.trigger("focus")})}}function e(b){for(var c="",d=b.links?"a":"span",e=0,f=0,g=b.$allOptions.length;g>f;f++){var h=b.$allOptions.eq(f);if("OPTGROUP"===h[0].tagName)c+='<span class="selecter-group',h.is(":disabled")&&(c+=" disabled"),c+='">'+h.attr("label")+"</span>";else{var i=h.val();h.attr("value")||h.attr("value",i),c+="<"+d+' class="selecter-item',h.is(":selected")&&""===b.label&&(c+=" selected"),h.is(":disabled")&&(c+=" disabled"),c+='" ',c+=b.links?'href="'+i+'"':'data-value="'+i+'"',c+=">"+a("<span></span>").text(r(h.text(),b.trim)).html()+"</"+d+">",e++}}b.$itemsWrapper.html(c),b.$items=b.$selecter.find(".selecter-item")}function f(c){c.preventDefault(),c.stopPropagation();var d=c.data;if(!d.$select.is(":disabled"))if(a(".selecter").not(d.$selecter).trigger("close.selecter",[d]),v){var e=d.$select[0];if(b.document.createEvent){var f=b.document.createEvent("MouseEvents");f.initMouseEvent("mousedown",!0,!0,b,0,0,0,0,0,!1,!1,!1,!1,0,null),e.dispatchEvent(f)}else e.fireEvent&&e.fireEvent("onmousedown")}else d.$selecter.hasClass("closed")?g(c):d.$selecter.hasClass("open")&&i(c)}function g(b){b.preventDefault(),b.stopPropagation();var c=b.data;if(!c.$selecter.hasClass("open")){var d=c.$selecter.offset(),e=w.outerHeight(),f=c.$itemsWrapper.outerHeight(!0),g=c.index>=0?c.$items.eq(c.index).position():{left:0,top:0};d.top+f>e&&c.$selecter.addClass("bottom"),c.$itemsWrapper.show(),c.$selecter.removeClass("closed").addClass("open"),w.on("click.selecter-"+c.guid,":not(.selecter-options)",c,h),void 0!==a.fn.scroller?c.$itemsWrapper.scroller("scroll",c.$itemsWrapper.find(".scroller-content").scrollTop()+g.top,0).scroller("reset"):c.$itemsWrapper.scrollTop(c.$itemsWrapper.scrollTop()+g.top)}}function h(b){b.preventDefault(),b.stopPropagation(),0===a(b.currentTarget).parents(".selecter").length&&i(b)}function i(a){a.preventDefault(),a.stopPropagation();var b=a.data;b.$selecter.hasClass("open")&&(b.$itemsWrapper.hide(),b.$selecter.removeClass("open bottom").addClass("closed"),w.off(".selecter-"+b.guid))}function j(b){b.preventDefault(),b.stopPropagation();var c=a(this),d=b.data;if(!d.$select.is(":disabled")){if(d.$itemsWrapper.is(":visible")){var e=d.$items.index(c);o(e,d),p(d)}d.multiple||i(b)}}function k(b,c){var d=a(this),e=b.data;if(!c&&!e.multiple){var f=e.$options.index(e.$options.filter("[value='"+s(d.val())+"']"));o(f,e),p(e)}}function l(b){b.preventDefault(),b.stopPropagation();var c=b.data;c.$select.is(":disabled")||c.multiple||(c.$selecter.addClass("focus").on("keydown.selecter"+c.guid,c,n),a(".selecter").not(c.$selecter).trigger("close.selecter",[c]))}function m(b){b.preventDefault(),b.stopPropagation();var c=b.data;c.$selecter.removeClass("focus").off("keydown.selecter"+c.guid+" keyup.selecter"+c.guid),a(".selecter").not(c.$selecter).trigger("close.selecter",[c])}function n(b){var c=b.data;if(13===b.keyCode)c.$selecter.hasClass("open")&&(i(b),o(c.index,c)),p(c);else if(!(9===b.keyCode||b.metaKey||b.altKey||b.ctrlKey||b.shiftKey)){b.preventDefault(),b.stopPropagation();var d=c.$items.length-1,e=c.index<0?0:c.index;if(a.inArray(b.keyCode,u?[38,40,37,39]:[38,40])>-1)e+=38===b.keyCode||u&&37===b.keyCode?-1:1,0>e&&(e=0),e>d&&(e=d);else{var f,g,h=String.fromCharCode(b.keyCode).toUpperCase();for(g=c.index+1;d>=g;g++)if(f=c.$options.eq(g).text().charAt(0).toUpperCase(),f===h){e=g;break}if(0>e)for(g=0;d>=g;g++)if(f=c.$options.eq(g).text().charAt(0).toUpperCase(),f===h){e=g;break}}e>=0&&o(e,c)}}function o(a,b){var c=b.$items.eq(a),d=c.hasClass("selected"),e=c.hasClass("disabled");if(!e){if(-1===a&&""!==b.label)b.$selected.html(b.label);else if(d)b.multiple&&(b.$options.eq(a).prop("selected",null),c.removeClass("selected"));else{{var f=c.html();c.data("value")}b.multiple?b.$options.eq(a).prop("selected",!0):(b.$selected.html(f).removeClass("placeholder"),b.$items.filter(".selected").removeClass("selected"),b.$select[0].selectedIndex=a),c.addClass("selected")}(!d||b.multiple)&&(b.index=a)}}function p(a){a.links?q(a):(a.callback.call(a.$selecter,a.$select.val(),a.index),a.$select.trigger("change",[!0]))}function q(a){var c=a.$select.val();a.external?b.open(c):b.location.href=c}function r(a,b){return 0===b?a:a.length>b?a.substring(0,b)+"...":a}function s(a){return a.replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g,"\\$1")}var t=0,u=b.navigator.userAgent.toLowerCase().indexOf("firefox")>-1,v=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(b.navigator.userAgent||b.navigator.vendor||b.opera),w=null,x={callback:a.noop,cover:!1,customClass:"",label:"",external:!1,links:!1,trim:0},y={defaults:function(b){return x=a.extend(x,b||{}),a(this)},disable:function(b){return a(this).each(function(c,d){var e=a(d).next(".selecter").data("selecter");if(null!==e)if("undefined"!=typeof b){var f=e.$items.index(e.$items.filter("[data-value="+b+"]"));e.$items.eq(f).addClass("disabled"),e.$options.eq(f).prop("disabled",!0)}else e.$selecter.hasClass("open")&&e.$selecter.find(".selecter-selected").trigger("click.selecter"),e.$selecter.addClass("disabled"),e.$select.prop("disabled",!0)})},enable:function(b){return a(this).each(function(c,d){var e=a(d).next(".selecter").data("selecter");if(null!==e)if("undefined"!=typeof b){var f=e.$items.index(e.$items.filter("[data-value="+b+"]"));e.$items.eq(f).removeClass("disabled"),e.$options.eq(f).prop("disabled",!1)}else e.$selecter.removeClass("disabled"),e.$select.prop("disabled",!1)})},destroy:function(){return a(this).each(function(b,c){var d=a(c).next(".selecter").data("selecter");null!==d&&(d.$selecter.hasClass("open")&&d.$selecter.find(".selecter-selected").trigger("click.selecter"),void 0!==a.fn.scroller&&d.$selecter.find(".selecter-options").scroller("destroy"),d.$select[0].tabIndex=d.tabIndex,d.$select.off(".selecter").removeClass("selecter-element").show(),d.$selecter.off(".selecter").remove())})},refresh:function(){return a(this).each(function(b,c){var d=a(c).next(".selecter").data("selecter");if(null!==d){var f=d.index;d.$allOptions=d.$select.find("option, optgroup"),d.$options=d.$allOptions.filter("option"),d.index=-1,f=d.$options.index(d.$options.filter(":selected")),e(d),o(f,d)}})}};a.fn.selecter=function(a){return y[a]?y[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof a&&a?this:c.apply(this,arguments)},a.selecter=function(a){"defaults"===a&&y.defaults.apply(this,Array.prototype.slice.call(arguments,1))}}(jQuery,window);