よくある赤丸に数字いれるやつ

あちこち調べてみたが、基本はPタグやらDIVタグでやってたので、簡潔にできる方法考えてみた

結論

<input type="text" value="値" style="text-align:center; width:20px; height:20px; border-radius:20px; border:none; background:red; color:white;" disabled="disabled" />

解説

text-align:center

テキストボックス内の文字を中央寄せ

width:20px、height:20px

用意する赤丸の大きさ

border-radius:20px

角の丸めを最大にして正円にする

border:none

テキストボックスのデフォルト枠線を消す

background、color

背景色、前景色の設定

disabled=”disabled”

編集できないように設定 且つ

サブミットされないように

※readonlyにすると、サブミットされる上にフォーカスが有効になってしまいます。