AMP-Bind input [value]: поле ввода, не ограниченное нулем, не имеет css в качестве ручного ввода
У меня есть форма с примерно 20 значениями, половина для информации о счете и половина для информации о месте назначения.
Когда клиент выполняет заполнение платежной информации, информация о месте назначения дополняется тем, что он ввел для выставления счета. Затем они могут изменить информацию о назначении, когда они достигнут этой части.
По мере того, как они завершают платежную информацию, входные данные для выставления счета изменяются с серого заполнителя с белым фоном на черные введенные значения с желтым фоном.
Тем не менее, этот стиль не применяется для информации о месте назначения, которая завершается с помощью AMP-bind.
Вместо добавления еще команд, есть ли у вас быстрый способ стилизовать законченную информацию о доставке с черным текстом и желтым фоном?
Смотрите здесь для демонстрации https://codepen.io/iamalta/pen/MXEMvO
<form method=post target="_top" action-xhr="https://example.com/thankyou.amp.html" custom-validation-reporting="show-all-on-submit" >
<h3>Billing Information</h3>
<div>
<label for="firstname" aria-hidden="true">First name</label>
<input
type="text"
value=""
name="firstname"
id="firstname"
placeholder="Billing First Name"
autocomplete="given-name"
required
on="input-debounced:AMP.setState({dfn: event.value})"
/>
</div>
<div>
<label for="lastname" aria-hidden="true">Last name</label>
<input
type="text"
value=""
name="lastname"
id="lastname"
placeholder="Billing Last name"
autocomplete="family-name"
required on="input-debounced:AMP.setState({dln: event.value})"
/>
</div>
<h3>Destination Information</h3>
<div>
<label for="destfirstname" aria-hidden="true">First name<span class=red>*</span></label>
<input
type="text"
value=""
name="destfirstname"
id="destfirstname"
placeholder="Destination First name"
autocomplete="given-name"
required
[value]="thisdfn != null ? thisdfn : dfn != null ? dfn : ''"
on="input-debounced:AMP.setState({thisdfn: event.value})"
/>
</div>
<div>
<label for="destlastname" aria-hidden="true">Last name</label>
<input
type="text"
value=""
name="destlastname"
id="destlastname"
placeholder="Destination Last name"
autocomplete="family-name"
required
[value]="thisdln != null ? thisdln : dln!=null ? dln : ''"
on="input-debounced:AMP.setState({thisdln: event.value})"
/>
</div>
<input type="submit" value="Submit" class="ampstart-btn">
</form>
Спасибо!