jQueryUIで綺麗なテキスト入力ボックスを作りたい

Question

jQueryUIでは下記のような書き方で綺麗にボタンを作れるのを知りました。

$('button').button();

テキスト入力ボックスの場合が分からず困っています。

どなたか知ってる方は教えていただけますか?

Answer 1

綺麗なテキスト入力ボックスを作りたい

この観点で参考情報を紹介します。

• Buttonウィジェットでさまざまなボタンを生成するには？ より引用

...
Buttonウィジェットを利用することで、<button>、<input type="radio">、<input type="checkbox">、<input type="submit">、<a>といった要素を、一様にボタンに整形できます。特に要素に対して新たな機能を追加するというウィジェットではありませんが、jQuery UIを利用している場合には、何も考えずとも、ページに対して一貫性のあるスタイルを適用できる、というメリットがあります。
...

<input>／<button>／<a>要素 をボタン形状にする例が示されています。

テキスト入力には見た目の工夫だけでなく、いろいろな入力サポート機能をつけることが可能です。

• textareaやinput要素内の任意のテキストをハイライトするスクリプト・jQuery highlightTextarea

• テキストエリア | Think deeply, Do less, More effective にはテキストエリアのいろいろな tips が述べられています。

　例: クリックするとテキストボックスにかわるラベルを実装
: テキストボックス・エリアにプレースホルダーを実装

ボタン、テキスト入力、チェックボックス、ラジオボタン は Form タグの中で使う事が多いです。

• フォーム周りで活躍してくれるjQueryプラグイン 50　などから、作成しようとしている web 画面に適したものを見つけて利用するとよいと思います。

Comments

[part2]

回答ありがとうございました！色々な情報ありがとうございました！この情報を踏まえてどうやろうか選ぼうと思います！

Answer 2

ただinputタグに変えるだけでOKですよ！

$("input").button()

例：

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