你可以使用CSS来美化HTML表单按钮吗？

Question

我不喜欢默认的按钮样式。它非常无聊。我正在使用

<input type="submit">

我能用CSS样式来改变type为button的按钮吗？如果不行，那我猜就得使用一个div代替这个按钮，并将它设置为超链接。那么如何让它在表单中起作用呢？

- Alex Mohr

Answer 1

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

演示

- Shailender Arora

---

我可以对文本输入和文本区域做同样的操作吗？ - Alex Mohr

@Xzar 为什么不肯定？你可以通过 CSS 轻松编辑和自定义文本输入框和文本区域的设计。 - Shailender Arora

Answer 2

是的，这很简单：

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

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

- ncksllvn

---

一些样式（例如：文本阴影）不会通过类应用，只有在直接针对输入类型时才起作用。 - Mark

在IE11中对我不起作用。它会接受所有内容，但文本阴影除外，但直接针对输入类型应用则可以正确地应用。 - Mark

Answer 3

是的，您可以使用 input[type=submit] 来针对特定内容进行目标定位，例如：

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

- Dave Anderson

---

@candiancreed input元素需要成为具有该类的元素的子元素。我已经在很多项目中使用了这个选择器。你能否创建一个例子并发布一个问题？ - Dave Anderson

Answer 4

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

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

- Ricky Youssef

---

我认为这不会起作用 - OP使用了type = submit而不是type = button。 - Ben Wheeler

Answer 5

你可能想要添加：

-webkit-appearance: none; 

如果您希望在移动版Safari上保持一致性...

- achoukah

Answer 6

将以下样式写入同一HTML文件的头部，或者写入一个.css文件中

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

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

.submit - 在 CSS 中表示类，因此我创建了一个具有一组属性的 submit 类，并将该类应用于 submit 标签，使用 class 属性

- Raj Adroit