在CSS中遇到初学者的麻烦造型表单按钮

Question

出于某种原因，我无法按照我想要的方式提交表单按钮。 这是他们现在的样子。

此代码适用于普通按钮，但不适用于表单提交按钮。

#sprint1, #sprint2, #sprint3, #sprint4, #sprint5  {
    width: 13%;
    height: 40px;
    display: inline-block;
    vertical-align: top; 
    font-family: Verdana, "Helvetica", sans-serif;
    font-size:small;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0px #07526e;
    padding-top: 2px;
    margin-left: auto;
    margin-right: auto;
    left: 16%;
    margin-top: 2%;
    position: relative;
    cursor: pointer;
    border: none;
    background-color: #467;
    border-radius: 5px;
}

正如您所看到的，灰色文本框在蓝色背景上看起来很可怕。 我根本无法使用按钮标签，我完全没有造型问题。但我必须坚持使用表单提交按钮，因为它们会触发PHP功能，而我无法获得正常按钮。

如何摆脱这些灰色框并将文字放在蓝色按钮上？非常感谢！ 这是我的fiddle

Answer 1

input[type=submit] {
    background-color:transparent;
   border:none;
}

这是将样式应用于输入的方式。在您的小提琴中，您只将样式应用于<form>

修改的

上面的示例使按钮透明。我的实际建议是将表单的样式应用于输入，使输入为蓝色而没有边框等。