CSS - 有选择框

编辑
OK对齐图像图标我想我找到了解决办法，在http://www.student.oulu.fi/~laurirai/www/css/middle/ 发现我用绝对定位技术。
我希望它能在IE中工作，因为我现在无法检查它...
CSS已更新。
END编辑CSS - 有选择框

我在选择框中有一个语言选择器。

在框的左侧，我想要一个带有活动语言的标志。当语言得到改变时，这将会被javascript改变。

唯一剩下的就是水平对齐标志与选择框与CSS - 跨浏览器。

CSS：

.combo { 
    background: silver; 
    margin: 10px 0; 
    position:relative; 
    height: 50px; 
} 

.combo span { 
    position:absolute;top:0;bottom:0;margin:auto; 
    display: block; float: left; 
    width: 16px; height: 11px; 
    background:url('flags.png') no-repeat; 
} 

.combo select { 
    position:absolute;top:0;bottom:0;margin:auto; 
    margin-left: 25px; 
} 

.combo span.flag-es {background-position: -16px 0} 
.combo span.flag-fr {background-position: -32px 0} 
.combo span.flag-gb {background-position: 0 -11px} 
.combo span.flag-it {background-position: -16px -11px} 
.combo span.flag-nl {background-position: -32px -11px}

HTML：

<div class="combo"> 
    <span class="flag-it"></span> 
     <select> 
      <option value="Italiano" selected>Italiano</option> 
      <option value="English">English</option> 
      <option value="Français">Français</option> 
      <option value="Español">Español</option> 
      <option value="Nederlands">Nederlands</option> 
    </select> 
</div>

来源

2014-04-20 FFish

你有链接到'flags.png'吗？ **编辑**：其实，可能不需要它。 –

这是怎么回事？ http://jsfiddle.net/Aarilight/c9V92/当然，红色将会替换为您的版本中的标志。 –

呃，你只是根据什么设置一些利润率？选择框在任何浏览器中都呈现不同的效果，因此您不能只设置边距顶部。 – FFish

既然你知道你的标志的尺寸，你可以在它的容器的50％的高度的地方，然后轻推它备份的一半它的高度与负边距。您需要为标志使用绝对定位，并定位其容器（除静态以外的任何内容 - 默认）。然后，您只需将选择元素向右推即可 - 标记上的右边距无法工作，因为它绝对定位。

.combo { 
    background: silver; 
    margin: 10px 0; 
    position: relative; 
} 

.combo span { 
    width: 16px; height: 11px; 
    background: white url('flags.png') no-repeat; 
    position: absolute; 
    top: 50%; 
    margin-top: -5.5px; 
} 

.combo select { 
    margin-left: 26px; // 16px + 10px 
}

看到这里的工作例如：http://jsfiddle.net/9mM2s/1/ 注意，在小提琴，我已经注释掉，我认为是多余的声明。

来源

2014-04-20 21:10:05 Daze

我看到你编辑了你的问题，在我编写它的时候添加了与我的答案相同的解决方案。伟大的思想都认为:)干杯！ – Daze

干杯大泽。你的例子更精确，所以我打算使用它。 – FFish

顺便说一下，['//'不是有效的CSS注释]（http://stackoverflow.com/questions/11218808/do-double-forward-slashes-direct-ie-to-use-specific-css）。为了简洁起见，我在这个小提琴中使用了它。 – Daze

CSS - 有选择框

回答

相关问题