css - 如何更改表单按钮的外观？

Question

我想知道是否可以更改表单按钮的外观。主要是高度、宽度等，但如果可能的话也可以着色，而不必为其创建图像。

Answer 1

你当然可以。按钮可以通过 CSS 像页面上的更多其他元素一样设置样式。例如：

http://jsfiddle.net/hs95X/

<form>
    <input type="button" value="Button1" class="c1" />
       <input type="button" value="Button2" class="c2" />
       <input type="button" value="Button3" class="c3" />
</form>

.c1 {
    background-color: #cc0000;
}
.c2 {
    color: white;
    background-color: #cc0000;
}
.c3 {
    color: white;
    background-color: #cc0000;
    width: 10em;
    height: 5em;
}

您应该会看到一个Button1红色背景，红色Button2上带有白色文本且Button3尺寸较大的 a。你可以做的远不止这些，但这只是一个开始。

Answer 2

http://www.w3schools.com/css/css3_intro.asp

单击链接并学习教程，您将获得所需的一切。

您可以通过更改背景颜色、板、角半径来更改按钮的形状。

<style>
button{
background: #444;
width: 100px;
height: 100px;
border: 1px solid #333;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
<button>Test</button>