时间戳

首页 > 解决方案 > 表单/按钮问题

html - 表单/按钮问题

问题描述

我正在为我的妻子创建一个网页并添加一个 PayPal 结帐按钮，尽管没有使用他们的标准按钮。出于某种原因，当我将其放入 WordPress 块时，此代码有效，但当我在浏览器中查看页面时无效？尝试了多个浏览器。

.text-sizing {
            font-size: 12px;
            text-align: center;
            padding: 0rem;
            display: flex;
            align-items: center;
        }

        .btn-wrapper {
            text-align: center;
            padding: 0.1rem;
            display: flex;
            align-items: center;
        }

        .btn {
            display: inline-block;
            text-decoration: none;
            border-radius: 50px;
            border: 0px solid #400779;
            color:#400779;
            background: white;
            font-size: 7px;
            cursor: pointer;
        }

        .btn:hover,
        .btn:active {
            display: inline-block;
            text-decoration: none;
            border-radius: 50px;
            border: 0px solid #400779;
            color:white;
            background: #400779;
            font-size: 7px;
            cursor: pointer;
        }
<div class="btn-wrapper">
    <div class="btn-wrapper">
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="XXXXXXXXXXXXXx">
            <input type="submit" class="btn" value="Preorder Signed Copy">
        </form>
    </div>
</div>

标签： htmlcsswordpress

解决方案

所以显然我使用了错误的 CSS 标签。它应该是'输入[type = XXX]'

<style>
input { text-align: center;
            padding: 0.1rem;
            display: flex;
            align-items: center;
}
.input-wrapper {
            text-align: center;
            padding: 0.1rem;
            display: flex;
            align-items: center;
        }         
input[type=submit], input[type=submit]:active, input[type=submit]:focus {                         
            display: inline-block;
            text-decoration: none;
            border-radius: 50px;
            border: 0px solid #400779;
            color:#400779;
            background: white;
            font-size: 7px;
            cursor: pointer;
  }          
  input[type=submit]:hover {   
            display: inline-block;
            text-decoration: none;
            border-radius: 50px;
            border: 0px solid #400779;
            color:white;
            background: #400779;
            font-size: 7px;
            cursor: pointer;
}
</style>

推荐阅读