问题描述
我正在尝试设置Drupal主题按钮的样式,但是当我将相同的CSS放入“ input”标签中时出了点问题。
在此代码段示例中,我们可以使用相同的CSS代码验证2种不同的效果。
我认为这是一个Drupal问题,但不是。当我将代码移到外面并尝试使用input标签时,它的显示方式与Drupal网站中的显示方式相同。
/* Buttons */
.form-submit {
cursor: pointer;
margin-left: 5px;
margin-bottom: 15px;
text-shadow: 0 -2px 0 #4a8a65,0 1px 1px #c2dece;
Box-sizing: border-Box;
font-size: 2em;
font-family: Helvetica,Arial,Sans-Serif;
text-decoration: none;
font-weight: bold;
color: #5ea97d;
height: 65px;
line-height: 65px;
padding: 0 32.5px;
display: inline-block;
width: auto;
background: -webkit-gradient(linear,left top,left bottom,from(#9ceabd),color-stop(26%,#9ddab6),to(#7fbb98));
background: linear-gradient(to bottom,#9ceabd 0%,#9ddab6 26%,#7fbb98 100%);
border-radius: 5px;
border-top: 1px solid #c8e2d3;
border-bottom: 1px solid #c2dece;
top: 0;
-webkit-transition: all 0.06s ease-out;
transition: all 0.06s ease-out;
position: relative;
}
.form-submit:visited {
color: #5ea97d;
}
.form-submit:hover {
background: -webkit-gradient(linear,from(#baf1d1),#b7e4ca),to(#96c7ab));
background: linear-gradient(to bottom,#baf1d1 0%,#b7e4ca 26%,#96c7ab 100%);
}
.form-submit:active {
top: 6px;
text-shadow: 0 -2px 0 #7fbb98,0 1px 1px #c2dece,0 0 4px white;
color: white;
}
.form-submit:active:before {
top: 0;
Box-shadow: 0 3px 3px rgba(0,0.7),0 3px 9px rgba(0,0.2);
}
.form-submit:before {
display: inline-block;
content: '';
position: absolute;
left: 0;
right: 0;
z-index: -1;
top: 6px;
border-radius: 5px;
height: 65px;
background: linear-gradient(to top,#1e5033 0%,#378357 6px);
-webkit-transition: all 0.078s ease-out;
transition: all 0.078s ease-out;
Box-shadow: 0 1px 0 2px rgba(0,0.3),0 5px 2.4px rgba(0,0.5),0 10.8px 9px rgba(0,0.2);
}
<input type="submit" id="edit-submit" name="op" value="Comprar" class="form-submit">
<a class="form-submit" href="#0">Comprar</a>
解决方法
伪元素::before
和::after
不适用于某些元素,例如输入。渲染的不同之处就在于此。问题已经提出,我邀请您阅读此答案以获取更多详细信息。:https://stackoverflow.com/a/4660434
嗯,嗯...我不是CSS专家,实际上我是个自学成才的人,但是我可以通过下面的代码片段来改善问题的解决方案。 如果我们无法以特定的方式做某事,我们必须跳出思维框框,找到一种无论如何都能使之正常工作的方法。如果不相等,但应该是相似的。 有人可以帮助我做得更好吗?
/* Buttons */
.form-submit {
/* :before */
top: 6px;
border-radius: 5px;
height: 65px;
background: linear-gradient(to top,#1e5033 0%,#378357 6px);
/* -webkit-transition: all 0.078s ease-out;
transition: all 0.078s ease-out; */
box-shadow: 0 1px 0 2px #9ddab6,0 5px 2.4px #7fbb98,0 8px 9px rgba(0,0.2);
cursor: pointer;
margin-left: 5px;
margin-bottom: 15px;
text-shadow: 0 -2px 0 #4a8a65,0 1px 1px #c2dece;
box-sizing: border-box;
font-size: 2em;
font-family: Helvetica,Arial,Sans-Serif;
text-decoration: none;
font-weight: bold;
color: #5ea97d;
height: 65px;
line-height: 65px;
padding: 0 32.5px;
display: inline-block;
width: auto;
background: -webkit-gradient(linear,left top,left bottom,from(#9ceabd),color-stop(26%,#9ddab6),to(#7fbb98));
background: linear-gradient(to bottom,#9ceabd 0%,#9ddab6 26%,#7fbb98 100%);
/* border-radius: 5px; */
border-top: 1px solid #c8e2d3;
border-bottom: 1px solid #c2dece;
top: 0;
-webkit-transition: all 0.06s ease-out;
transition: all 0.06s ease-out;
position: relative;
}
.form-submit:visited {
color: #5ea97d;
}
.form-submit:hover {
background: -webkit-gradient(linear,from(#baf1d1),#b7e4ca),to(#96c7ab));
background: linear-gradient(to bottom,#baf1d1 0%,#b7e4ca 26%,#96c7ab 100%);
}
.form-submit:active {
top: 6px;
text-shadow: 0 -2px 0 #7fbb98,0 1px 1px #c2dece,0 0 4px white;
color: white;
box-shadow: 0 0px 0 2px rgba(0,0.3),0 0px 2.4px rgba(0,0.5),0 0px 9px rgba(0,0.2);
}
<input type="submit" id="edit-submit" name="op" value="Comprar" class="form-submit">
<a class="form-submit" href="#0">Comprar</a>