Question

我在Vue.js应用程序中设计条纹信用卡输入的样式时遇到问题。我想将背景颜色更改为＃f1f1f1并将高度更改为60px，但是我无法通过基本样式或CSS来执行此操作。我究竟做错了什么？理想情况下，我想使用CSS作为目标。这是我的代码：

loadStripe() {
      card = elements.create("card", {
        style: {
          base: {
            iconColor: '#2A2A2A',
            color: '#2A2A2A',
            fontWeight: 300,
            fontFamily: 'Lato, Open Sans, Segoe UI, sans-serif',
            fontSize: '19px',
            // height: '60px',
            // background: '#f1f1f1',
            '::placeholder': {
              color: '#2A2A2A',
              fontSize: '19px',
            },
          },
        }
      });

提前谢谢！

Answer 1

就像官方文档https://stripe.com/docs/stripe-js/reference#elements-create中所述，不支持为输入元素添加背景色。

但是您可以对HTML代码中的父元素使用一些技巧，使其看起来像输入，并根据需要设置样式。

Answer 2

您可以如下更改background color，

@app.route('/get')
def findScore():
  id_param= str(request.args.get('id'))
  ret = dict()
  cursor = db.scores.find({"id": { "$gt": id_param }}).sort("id",1).limit(20) #ascending
  for document in cursor:
    print(document)
    ret = document
  return jsonify(json_utils.dumps(ret))

app.run()

Answer 3

根据文档：https://stripe.com/docs/js/appendix/style 方法是“backgroundColor”。但到目前为止，相同的文档建议直接对元素容器的 CSS 进行一些调整。特别是对于“背景”和“高度”对我来说，直接修改 CSS 效果更好。工作示例：

<template>
   ...
   <div id="card-element"></div>
   ...
</template>
<script>
...
    let adjustments = {
      hidePostalCode: true,
      style: {
        base: {
          // backgroundColor: "#cbf5f8",
          fontWeight: "400",
          fontFamily: "Avenir, Helvetica, Arial, sans-serif",
          fontSize: "16px",
          fontSmoothing: "antialiased",
          ":-webkit-autofill": {
            color: "#fce883",
          },
        },
        invalid: {
          iconColor: "#FFC7EE",
          color: "#FFC7EE",
        },
      },
    };
    card = elements.create("card", adjustments); 
...
</script>
<style>
#card-element {
  border: 1px solid currentColor;
  border-radius: 4px;
  height: 50px;
  background: #cbf5f8;
  margin-bottom: 20px;
  padding-top: 10px;
}
</style>

Stripe.js-无法更改背景颜色或信用卡输入的高度

3 个答案: