你能用css设计html表单按钮吗？答案

【问题标题】：Can you style html form buttons with css?你能用css设计html表单按钮吗？
【发布时间】：2013-02-03 16:57:02
【问题描述】：

我不喜欢默认的按钮样式。真的很无聊。我正在使用

<input type="submit">

键入按钮。我可以在css中以某种方式设计这些样式吗？如果不是，我想另一种方法是使用 div 代替，并将其设为链接。您如何使这些与表单一起使用？

【问题讨论】：

标签： html css forms

【解决方案1】：

您可能需要添加：

-webkit-appearance: none;

如果您需要它在 Mobile Safari 上保持一致...

【讨论】：

【解决方案2】：

您可以通过 CSS 轻松实现您的愿望：-

HTML

<input type="submit" name="submit" value="Submit Application" id="submit" />

CSS

#submit {
    background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
    font-family: 'Oswald';
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
}



#submit:hover {
    border: none;
    background:red;
    box-shadow: 0px 0px 1px #777;
}

DEMO

【讨论】：

我可以对文本输入和文本区域做同样的事情吗？
@Xzar 为什么不确定是否可以编辑可以通过 CSS 轻松自定义文本输入和文本区域的设计.....

【解决方案3】：

将以下样式写入相同的 html 文件头部分或写入 .css 文件

<style type="text/css">
.submit input
    {
    color: #000;
    background: #ffa20f;
    border: 2px outset #d7b9c9
    }
</style>

<input type="submit" class="submit"/>

.submit - 在 css 中。表示类，所以我创建了具有一组属性的提交类
并使用类属性将该类应用于提交标签

【讨论】：

【解决方案4】：

您可以通过这种方式直接创建自己的样式：

 input[type=button]
 { 
//Change the style as you like
 }

【讨论】：

我认为这行不通 -- OP 使用 type=submit，而不是 type=button。

【解决方案5】：

是的，您可以使用 input[type=submit] 专门针对那些目标，例如

.myFormClass input[type=submit] {
  margin: 10px;
  color: white;
  background-color: blue;
}

【讨论】：

@candiancreed input 元素需要是该类元素的子元素。我有这个选择器在很多项目中工作。您可以创建一个示例并发布一个问题吗？

【解决方案6】：

是的，很简单：

input[type="submit"]{
  background: #fff;
  border: 1px solid #000;
  text-shadow: 1px 1px 1px #000;
}

我建议给它一个 ID 或一个类，这样你就可以更容易地定位它。

【讨论】：

某些样式（IE：Text-Shadow）不会通过类应用，只有在您直接针对输入类型时才有效。
在 IE11 中不适合我。它会接受除文本阴影之外的所有内容，但直接针对输入类型会正确应用它。