AMP-Bind input [value]: not-null bound input box does not have css as manual input

Question

I have a form with about 20 values, half for billing info and half for destination info.

When customer steps through completing the billing info, the destination info is completed with what they entered for billing. They can then change destination info when they reach that part.

As they complete the billing info, the billing input changes from grey placeholder with white background to black entered values with yellow background.

However, this styling does not happen for the destination info that is completed with AMP-bind.

In lieu of adding yet more commands, do you have a quick way to style the completed shipping info with black text and yellow background?

See here for demo 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>

Thank you!

can you share the image how its look, also visit this link : https://codepen.io/anon/pen/mKqrrO — Bachcha Singh, Jun 17 '18 at 08:39
I mean after fill the first name and last name in how it's look, just share html and CSS or codepen — Bachcha Singh, Jun 18 '18 at 17:14
After more testing, I think that it may be the autocomplete tag in the input that makes the field yellow background. Does that sound right? — I am Alta, Jun 19 '18 at 19:05
no I have use amp-bind and add the class(bgy) when field is not empty, [class]="dfn!='' ? 'bgy' : ''" — Bachcha Singh, Jun 19 '18 at 19:17
Gotcha. With autocomplete, the field turns yellow when it's completed. Apparently this happens on Chrome. Don't know about other browsers. https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete Thanks for your help. — I am Alta, Jun 19 '18 at 20:52
I was wondering what was going on so that I can further code it. I can handle it from here. Thank you Bachcha! — I am Alta, Jun 21 '18 at 17:59

AMP-Bind input [value]: not-null bound input box does not have css as manual input

0 Answers0