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/

Answer 2

HTML

<button class="set-theme blue">•&lt;/button>
<button class="set-theme red">•&lt;/button>

CSS

body {
  margin: 0;
  padding: 0;
}

button.set-theme {
  font-size: 4em;
  line-height: .5em;
  padding: 0 .2em;
}

button.set-theme.blue {
  color: blue;
}

button.set-theme.red {
  color: red;
}

Answer 3

找到简单的简化代码 CSS。仅在 HTML 代码中将颜色名称作为文本删除

button {padding: 5px; border:0; width: 10px; height:10px;}
button[name="darkBlue"] {background: #005AAE;}
button[name="black"]  {background: #000;}

希望这会有所帮助，快乐的编码。