如何在<button>元素中放置彩色方块而不是某些文本？</button>

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;}

或者，如果您希望按钮有一些填充，请使用<span>而不是<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">•</button>
<button class="set-theme red">•</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;}

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