css - 输入标签运行意外的 CSS 效果
问题描述
我正在尝试设置我的 Drupal 主题按钮的样式,但是当我将相同的 CSS 放入“输入”标签时出现了问题。
在这个片段示例中,我们可以使用相同的 CSS 代码验证 2 种不同的效果。
我认为这是一个 Drupal 问题,但事实并非如此。当我将代码拿到外面并使用输入标签进行尝试时,它的显示方式与 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, left top, left bottom, from(#baf1d1), color-stop(26%, #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, 0, 0.7), 0 3px 9px rgba(0, 0, 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, 0, 0.3), 0 5px 2.4px rgba(0, 0, 0, 0.5), 0 10.8px 9px rgba(0, 0, 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
推荐阅读
- sql-server - Transaction linked SQL Server
- google-app-engine - How to run Google App Engine WordPress blog locally
- javascript - Unable to filter the data on multiple conditions
- java - 使用 JAX-RS 时,有没有办法将变量放入自定义 ConstraintValidator?
- python - 如何在一个 django 模板页面中显示多个 matplotlib 图
- azure - How to trigger C++ code with event grid in Azure?
- java - 如何使用 Java spring 提供动态创建的文件?
- android - Error: Android dependency has different version for the compile and runtime classpath
- ios - iOS Swift 以编程方式连接 WiFi 并区分密码错误和范围内没有 WiFi
- reactjs - Checked Checkbox showing at top on React Filter Search