28

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

<input type="submit">

类型按钮。我可以在css中以某种方式设计这些样式吗？如果没有，我猜另一种方法是使用 div 代替，并将其设为链接。你如何使这些与表单一起工作？

4

6 回答 6

47

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

演示

于 2013-02-19T05:15:27.607 回答
19

是的，这很简单：

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

我建议给它一个 ID 或一个类，以便您可以更轻松地定位它。

于 2013-02-19T05:12:07.863 回答
3

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

.myFormClass input[type=submit] {
  margin: 10px;
  color: white;
  background-color: blue;
}
于 2013-02-19T05:12:57.113 回答
3

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

 input[type=button]
 { 
//Change the style as you like
 }
于 2013-02-19T05:18:41.600 回答
1

您可能要添加：

-webkit-appearance: none;

如果您需要它在 Mobile Safari 上看起来一致...

于 2014-12-21T14:11:42.830 回答
0

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

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

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

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

于 2013-02-19T05:11:39.767 回答