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)
最佳答案
嗯,我明白了。我希望这对其他人有帮助。显然,在 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;
}
编码愉快!!
关于css - 选择控件的 Bootstrap 跨浏览器问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22155774/