bootstrap crossbrowser问题与选择控制 [英] bootstrap crossbrowser issues with select control
问题描述
请参阅下图以了解我的意思。
这段代码不会更简单,它告诉我这个修补程序可能在Bootstrap本身之外。这是我的代码
HTML
< div class = COL-SM-4\" >
< select>
< option> - 跳转至 - < / option>
< option>选项1< / option>
< option>选项2< / option>
< option>选项3< / 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固亮(@ pss-black,80%);
-webkit-border-radius:0;
border-top-left-radius:5px;
border-right-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')不重复100%50%;
-webkit-appearance:none;
-moz-appearance:none;
letter-spacing:normal;
}
任何人都知道如何制作FF和IE看起来像Chrome?...如果可能的话,不需要额外的插件。我试图用最少的脚本/图像使用(主要是引导框架中的纯css)来构建它。
好吧,我想通了。我希望这可以帮助别人。显然,Dream.in.Code或Codeproject中没有人知道这一点。这里就是它。
第一件事首先...您需要head.min.js 这里
Head.js是一个现代化器,但实际上您可以通过其名称来标识每个浏览器,并告诉它在您应用类时到一个元素,你真的希望他们分别做一些不同的事情。
这是我用于FF和IE *的独立代码,请注意,我正在使用。减。因此,为您调整CSS前端开发人员
/ * ++++ IE浏览器兼容性样式++++ * /
html.ie select {
padding:4px 5px 4px 10px!important;
背景:减轻(@ pss-black,65%)!重要;
背景:网址!(数据:图像/ SVG + XML; BASE64,PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZGZkZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ + CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc +)重要的;
background:-ms-linear-gradient(top,#eaeaea 0%,#fdfdfd 100%)!important;
背景:线性渐变(至底部,#eaeaea 0%,#fdfdfd 100%)!重要;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr ='#eaeaea',endColorstr ='#fdfdfd',GradientType = 0)!important;
$ b / * ++++ Firefox兼容性样式++++ * /
@ -moz-document url-prefix(){
select {
padding:4px 5px 4px 10px!important;
text-indent:0.01px;
text-overflow:'';
}
}
/ * ++++删除Firefox中图像顶部的alt =...++++ * /
.ui-datepicker-trigger {
color:transparent;
}
快乐编码!!
Bootstrap may be having some issues with the way they render their form select control.
Refer to the picture below to see what I mean.
The code couldn't be any simpler, which tells me that the fix may be outside of Bootstrap itself. This is my code
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;
}
Anyone knows how to make FF and IE look like Chrome?...If possible, no additional plugins. I am trying to build this with minimal script/images use (mostly pure css in the bootstrap framework)
Well, I figured it out. I hope this helps someone else. Apparently, no one knew this in Dream.in.Code or Codeproject either. Here it goes.
First thing first...You need head.min.js here
Head.js acts as a modernizer, but you can actually identify each browser by its name and tell it that while you are applying a class to an element, you actually want them "separately" to do something different.
This is the isolated code I used for FF and IE *mind you, I am using .less. So adjust accordingly for you CSS front end devs
/* ++++ 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;
}
HAPPY CODING!!
这篇关于bootstrap crossbrowser问题与选择控制的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!