输入标记运行意外的CSS效果

我正在尝试设计Drupal主题按钮的样式，但当我将相同的CSS放入“input”标记时，出现了一些错误

在这个代码片段示例中，我们可以用相同的CSS代码验证两种不同的效果

我以为这是Drupal的问题，但事实并非如此。当我从外部获取代码并尝试使用输入标记时，它显示的方式与Drupal站点中的相同

/*按钮*/
.表格提交{
光标：指针；
左边距：5px；
边缘底部：15px；
文本阴影：0-2px 0#4a8a65，0-1px 1px#c2dece；
框大小：边框框；
字号：2em；
字体系列：Helvetica、Arial、无衬线字体；
文字装饰：无；
字体大小：粗体；
颜色：#5ea97d；
高度：65px；
线高：65px；
填充：0 32.5px；
显示：内联块；
宽度：自动；
背景：-webkit渐变（线性、左上、左下、从（#9ceabd）、颜色停止（26%，#9ddab6）到（#7fbb98））；
背景：线性梯度（至底部，#9ceabd 0%，#9ddab6 26%，#7fbb98 100%）；
边界半径：5px；
边框顶部：1px实心#c8e2d3；
边框底部：1px实心#c2dece；
排名：0；
-webkit过渡：所有0.06秒都将轻松推出；
过渡：所有0.06秒都会变缓；
位置：相对位置；
}
。表格提交：已浏览{
颜色：#5ea97d；
}
。表格提交：悬停{
背景：-webkit渐变（线性、左上、左下、从（#baf1d1）、颜色停止（26%，#b7e4ca）到（#96c7ab））；
背景：线性梯度（至底部，#baf1d1 0%，#b7e4ca 26%，#96c7ab 100%）；
}
.表格提交：活动{
顶部：6px；
文本阴影：0-2px0#7fbb98，0-1px1px#c2dece，0-04px白色；
颜色：白色；
}
.表格提交：活动：之前{
排名：0；
盒影：0 3px 3px rgba（0,0,0,0.7），0 3px 9px rgba（0,0,0,0.2）；
}
.表格提交：在{
显示：内联块；
内容：''；
位置：绝对位置；
左：0；
右：0；
z指数：-1；
顶部：6px；
边界半径：5px；
高度：65px；
背景：线性梯度（至顶部，#1e5033 0%，#378357 6px）；
-webkit过渡：所有0.078都可以轻松过渡；
过渡：所有的0.078都放松了；
盒影：0 1px 0 2px rgba（0,0,0,0.3），0 5px 2.4px rgba（0,0,0,0.5），0 10.8px 9px rgba（0,0,0,0.2）；
}

伪元素

：：before

和

：：after

不能处理某些元素，如输入。渲染的不同之处就在于此。问题已经提出来了，我请您阅读此答案以了解更多细节。

好吧，好吧。。。我不是CSS专家，实际上我是自学成才，但我可以改进下面这个问题的解决方案。 如果我们不能以一种特定的方式做某件事，我们就必须跳出框框去思考，并找到一种方法让它发挥作用。如果不是相等的，而是相似的，则是预期的。 有人能帮我做得更好吗

/*按钮*/
.表格提交{
/*：之前*/
顶部：6px；
边界半径：5px；
高度：65px；
背景：线性梯度（至顶部，#1e5033 0%，#378357 6px）；
/*-webkit过渡：所有0.078都可以轻松过渡；
过渡：所有0.078都将释放；*/
盒影：0 1px 0 2px#9ddab6，0 5px 2.4px#7fbb98，0 8px 9px rgba（0,0,0,0.2）；
光标：指针；
左边距：5px；
边缘底部：15px；
文本阴影：0-2px 0#4a8a65，0-1px 1px#c2dece；
框大小：边框框；
字号：2em；
字体系列：Helvetica、Arial、无衬线字体；
文字装饰：无；
字体大小：粗体；
颜色：#5ea97d；
高度：65px；
线高：65px；
填充：0 32.5px；
显示：内联块；
宽度：自动；
背景：-webkit渐变（线性、左上、左下、从（#9ceabd）、颜色停止（26%，#9ddab6）到（#7fbb98））；
背景：线性梯度（至底部，#9ceabd 0%，#9ddab6 26%，#7fbb98 100%）；
/*边界半径：5px*/
边框顶部：1px实心#c8e2d3；
边框底部：1px实心#c2dece；
排名：0；
-webkit过渡：所有0.06秒都将轻松推出；
过渡：所有0.06秒都会变缓；
位置：相对位置；
}
。表格提交：已浏览{
颜色：#5ea97d；
}
。表格提交：悬停{
背景：-webkit渐变（线性、左上、左下、从（#baf1d1）、颜色停止（26%，#b7e4ca）到（#96c7ab））；
背景：线性梯度（至底部，#baf1d1 0%，#b7e4ca 26%，#96c7ab 100%）；
}
.表格提交：活动{
顶部：6px；
文本阴影：0-2px0#7fbb98，0-1px1px#c2dece，0-04px白色；
颜色：白色；
盒影：0px02pxRGBA（0,0,0,0.3），0px2.4pxRGBA（0,0,0,0.5），0px9pxRGBA（0,0,0,0.2）；
}

我不知道。我看到了这个链接，似乎有很多变通方法，但是当我与Drupal合作时，我不能改变它的代码，只能改变它的风格。按钮的Drupal样式为.form submit和.form submit:仅悬停。我想知道我是否可以做一些工作。我不熟悉Drupal，但从我所读到的资料来看，WordPress之类的钩子可能会有所帮助。您应该了解如何用Drupal上的按钮替换输入元素。这里有一个例子，但我不知道这是否是最好的方法：嗨，谢谢你提供更多信息。我查看了一下，但我使用了Drupal 7而不是8。我搜索了关键字“用Drupal上的按钮替换输入元素”，还发现问题是我需要更改所有表单提交，并且我需要一些更实用的解决方案，因为所有提供的解决方案都有大量工作。