html - 中に色付きの正方形を入れるにはどうすればよいですかテキストの代わりに要素？

Question

私は次のHTMLを持っています:

<button name="darkBlue" onclick="setThemeColor(this.name)">Blue</button>
<button name="black" onclick="setThemeColor(this.name)">Black</button>

ボタンは、ユーザーがテーマの色を選択できるようにするために使用されます。単語を色の正方形に置き換える方法を教えてもらえますか?

Answer 1

ボタンを塗りつぶし、背景色を次のように指定します。

button.red {border: 1px solid #f00; background: #f00;}
button.blue {border: 1px solid #00f; background: #00f;}

または、ボタンにパディングを持たせたい場合は、 a では<span>なく a を使用<div>します。ボタンはインライン要素でdivあり、ブロック要素であるため、ブロック要素をインライン要素内にネストすることは想定されておらず、上記と同じ方法でスタイルを設定します. このようなもの：

<button class="red"><span></span></button>

そしてCSS：

button.red span {border: 1px solid #f00; background: #f00; display: block;}

プレビュー

フィドル: http://jsfiddle.net/praveenscience/8Waxm/