web-dev-qa-db-ja.com

入力内のテキストを揃える方法は？

すべてのデフォルト入力では、入力するテキストは左側から始まります。どのようにしてそれを右側から始めるのですか？

htmlcssformshtml-input
162
phz

CSSで text-align プロパティを使用します。

input { 
    text-align: right; 
}

これはページのすべての入力で有効になります。
それ以外の場合、1つの入力だけのテキストを揃えたい場合は、スタイルをインラインに設定します。

<input type="text" style="text-align:right;"/>
261
elias

あなたのCSSでこれを試してください：

input {
text-align: right;
}

テキストを中央に揃えるには：

input {
text-align: center;
}

しかし、それがデフォルトであるため、左寄せにする必要があります - そして最もユーザーフレンドリーなようです。

21
Gautam3164

ここに行きます ：

input[type=text] { text-align:right }
<form>
    <input type="text" name="name" value="">
</form>
9
Cynthia

ここで受け入れられている答えは正しいですが、私は少し情報を追加したいのですが。あなたがブートストラップのようなライブラリ/フレームワークを使用しているなら、これのためにクラスで構築されるかもしれません。たとえば、ブートストラップはtext-rightクラスを使用します。このように使用してください。

<input type="text" class="text-right"/> 
<input type="number" class="text-right"/>

注意として、これは上に示した数値のように他の入力タイプでも同様に働きます。

あなたがブートストラップのようなNiceフレームワークを使っていないのなら、このヘルパークラスのあなた自身のバージョンを作ることができます。他の回答と似ていますが、それを入力クラスに直接追加するのではないので、サイトやページのすべての入力には適用されません。これは望ましい動作ではないかもしれません。そのため、インラインスタイリングを必要とせず、またすべての入力ボックスに影響を与えずに、物事を正しく整列させるためのNice easy cssクラスが作成されます。

.text-right{
    text-align: right;
}

これで、このクラスをclass="text-right"を使った上記の入力とまったく同じように使用できます。多くのキーストロークを節約するわけではありませんが、コードがきれいになります。

6
Doug E Fresh

テキストがフォーカスを失った後に右揃えにしたい場合は、方向修飾子を使用してみてください。これは、フォーカスを失った後のテキストの右側部分を表示します。例えばファイル名を長いパスで表示したい場合に便利です。

input.rightAligned {
  direction:ltr;
  overflow:hidden;
}
input.rightAligned:not(:focus) {
  direction:rtl;
  text-align: left;
  unicode-bidi: plaintext;
  text-overflow: Ellipsis;
}
<form>
    <input type="text" class="rightAligned" name="name" value="">
</form>

Notセレクタは現在十分にサポートされています。 ブラウザサポート

2
rulonder