bootstrap crossbrowser与select控件有关

Question

Bootstrap可能在呈现表单选择控件时遇到一些问题。

参考下图了解我的意思。

代码可能不是更简单，这告诉我修复可能在Bootstrap本身之外。这是我的代码

HTML

  <div class="col-sm-4">
    <select>
       <option>- Jump To -</option>
       <option>Option 1</option>
       <option>Option 2</option>
       <option>Option 3</option>
       <option>Option 4</option>
    </select>
    <button class="btn btn-green btn-go">GO</button>
  </div>

CSS

select {
   color: lighten(@pss-black, 30%);
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 230px;
   height: 32px;
   padding: 0 34px 0 10px;
   border: 1px solid lighten(@pss-black, 80%);
  -webkit-border-radius: 0;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   font-size: 1em;
   background: @pss-white url('@{img-path}bg_select.png') no-repeat 100% 50%;
   -webkit-appearance: none;
   -moz-appearance: none;
   letter-spacing: normal;

}

任何人都知道如何使FF和IE看起来像Chrome？...如果可能，没有额外的插件。我试图用最少的脚本/图像来构建它（在bootstrap框架中主要是纯css）

Answer 1

好吧，我明白了。我希望这有助于其他人。显然，没有人在Dream.in.Code或Codeproject中知道这一点。在这里。

首先要做的事情......你需要head.min.js here

Head.js充当现代化器，但你可以通过它的名称来识别每个浏览器，并告诉它当你将一个类应用于一个元素时，你实际上希望它们“分开”来做一些不同的事情。

这是我用于FF和IE *的隔离代码，请注意，我正在使用.less。因此，为CSS前端开发人员进行相应的调整

/* ++++ Styles for IE Browser Compatibility ++++ */
html.ie select {
padding: 4px 5px 4px 10px !important;
background: lighten(@pss-black, 65%) !important;
background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZGZkZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) !important;
background: -ms-linear-gradient(top,  #eaeaea 0%,#fdfdfd 100%) !important;
background: linear-gradient(to bottom,  #eaeaea 0%,#fdfdfd 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#fdfdfd',GradientType=0 ) !important;
  }

  /* ++++ Styles for Firefox Compatibility ++++ */
  @-moz-document url-prefix() {
select {
    padding: 4px 5px 4px 10px !important;
   text-indent: 0.01px;
   text-overflow: '';
}
  }

  /* ++++ Removes the alt="..." on top of the image in Firefox ++++ */
    .ui-datepicker-trigger{
    color:transparent;
  }

快乐编码!!