jQuery UI styled text input box

Question

jQuery UI makes buttons look nice with $('button').button();.

Is there an equivalent for text input boxes?

Answer 1

There's nothing to stop you from doing $("input").button()... I like this:

$('input:text, input:password')
  .button()
  .css({
          'font' : 'inherit',
         'color' : 'inherit',
    'text-align' : 'left',
       'outline' : 'none',
        'cursor' : 'text'
  });

A fuller example.

Answer 2

Add the class ui-corner-all to your input and post-style the input with CSS.

$('input').addClass("ui-corner-all");

http://jsfiddle.net/TTShr/

Answer 3

I know this is old. But, if anyone is just looking to style their inputs to look more UIish, just add the following classes: $('input').addClass("ui-widget ui-widget-content ui-corner-all");

You could just hard code the classes too.

Answer 4

To sum things up I would like to add my implementation:

$('input:text, input:password, input[type=email]').button()
  .addClass('ui-textfield')
  .off('mouseenter').off('mousedown').off('keydown');

The CSS would be:

.ui-textfield {
    font: inherit;
    color: inherit;
    background: none;
    text-align: inherit;
    outline: none;
    cursor: text;
}

See it here: http://jsfiddle.net/UXdLQ/1544/