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>

Спасибо!

0 ответов

Другие вопросы по тегам