简体   繁体   English

使用Uniform / jquery更改SELECT的高度

[英]Changing the height of SELECT with Uniform / jquery

I have this problem where I want to change the height of some select-dropdown listboxes. 我要更改某些选择下拉列表框的高度时遇到此问题。

At the moment this is how they look like http://i46.tinypic.com/2qstseo.gif 目前,这就是它们的外观http://i46.tinypic.com/2qstseo.gif

And I would like them to be taller and also close together. 我希望他们更高,也在一起。 I don't know if this is possible wih Uniform, but here is my code nevertheless: 我不知道是否可以通过Uniform进行操作,不过这仍然是我的代码:

#uniform-resize span
{
    width:120px;
    height:60px;

}

This is one of the selects (they are quite large): 这是选择之一(它们非常大):

<select id="resize">
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>

Any ideas? 有任何想法吗? Obviously the height:60px; 显然高度:60px; does not work. 不起作用。

Thank you very much for the support guys, let me know if you need any more info. 非常感谢您的支持,如果您需要更多信息,请告诉我。

You can go in uniform.default.css and change some parts, for example, this part: 您可以进入uniform.default.css并更改某些部分,例如,此部分:

div.selector select {
  min-width: 190px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  border: solid 1px #fff;
}

or you can try adding !important 或者您可以尝试添加!important

#resize
{
    width:120px !important;
    height:60px !important;
}

EDIT : Uniform.js is using this sprite: http://uniformjs.com/images/sprite.png so I doubt you can really change the height of the select element. 编辑 :Uniform.js正在使用此sprite: http ://uniformjs.com/images/sprite.png,因此我怀疑您是否真的可以更改select元素的高度。

EDIT : To change the width: 编辑 :要更改宽度:

.selector span{width:auto !important}
.selector select{width:auto !important}
.selector{width:auto !important}

You need to edit the sprite image or use another one altogether (using the same layout) and then you need to overwrite all related CSS parts of Uniform, namely those with positions for this sprite image and font declarations. 您需要编辑子画面图像或完全使用另一个子画面(使用相同的布局),然后需要覆盖Uniform的所有相关CSS部分,即具有该子画面图像和字体声明的位置的那些部分。 Check out Uniform's other themes - it's all there. 查看Uniform的其他主题-全部都在那里。

Btw: To save you future headache do not use !important, but overwrite existing CSS rules cleanly. 顺便说一句:为避免日后头疼,请不要使用!important,而应完全覆盖现有CSS规则。 Do so in a CSS file loaded AFTER uniform.default.css and don't mess with Uniform's files directly! 在CSS.default.css之后加载的CSS文件中执行此操作,不要直接与Uniform的文件混淆!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM