替换购物结帐占位符

Question

我想要更改特定Shopify Checkout元素的占位符文本。

我想把"Street and house number“改成加泰罗尼亚语。在系统中没有办法翻译这个字符串，所以我想也许我可以用一些CSS来代替它？

​

​

Answer 1

首先，您需要隐藏默认占位符

input[name=INPUTNAME]::placeholder {
  color:transparent;
}
input[name=INPUTNAME]:-ms-input-placeholder {
  color:transparent;
}
input[name=INPUTNAME]::-webkit-input-placeholder {
  color:transparent;
}

然后，您需要使用::before的内容来模拟占位符，如下所示

input[name=INPUTNAME] + label::before{
content:'new place holder text';
position:absolute;
top:0;//position placeholder
left:0;// position placeholder
pointer-events: none;//make it not clickable so user can interact with input
// font size and style must be same as the input 
/// color must match the placeholder color
}

因为输入不支持:：之前，如果HTML代码是这样的，则必须对输入使用:：之前的父元素或紧跟在输入后面的元素

<div class="input">
   <input/>
</div>

使用

.input::before

如果HTML代码是这样的

<input/>
<label></label>

使用

input + label::before

"+ label“表示输入后的第一个标签

问题可能是在输入为空或用户处于焦点时隐藏占位符。最好的情况是输入后面跟着标签之类的元素

input[name=INPUTNAME]:focus + label::before,input[name=INPUTNAME]:not(:placeholder-shown) + label::before{
  display:none;
}