设置像jQuery Redmond主题的输入文本框

时间:2012-07-07 21:37:46

标签: jquery jquery-ui textbox

我在jQuery-ui团队使用Redmond主题的网页中使用jQuery。 问题是输入文本框仍然没有被Redmond主题格式化。这会产生一种不太令人印象深刻的外观。有没有办法为输入文本框元素创建合适的样式,以便它们与jQuery中的Redmond主题混合?

1 个答案:

答案 0 :(得分:1)

正如我在评论中提到的,没有内置的方法可以实现这一目标。你可以做的是采取主题中使用的一些颜色,然后应用到文本框,以获得看起来相似的东西。

以下是我根据日期选择器的外观和感觉制作的几个选项。

/* Option 1 */
​input[type=text] {
    background: #5C9CCC url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x;
    border: 1px solid #4297D7;
    font-weight: bold;
    color: white;
    padding: 5px;
    border-radius: 5px;
}

/* Option 2 */
input[type=text] {
    background: #DFEFFC url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    color: #2E6E9E;
    font-weight: bold;
    border: 1px solid #C5DBEC;
    padding: 5px;
    border-radius: 5px;
}

示例 - http://jsfiddle.net/XjCjR/1