Question

I am using jQuery in my web page with Redmond theme from jQuery-ui team. The problem is that the input textboxes remain unstyled by Redmond theme. This creates a not-too-impressive look-and-feel. Is there any way to create an appropriate style for input textbox elements so they blend with Redmond theme in jQuery?

Answer 1

As I mentioned in my comment there is no built in way to accomplish this. What you can do is take some of the colors used in the theme and apply then to the textbox to get something that looks similar.

Here’s a couple options that I made that are based off the look and feel of the datepicker.

/* 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;
}

Example – http://jsfiddle.net/XjCjR/1