title: AWS Cognito - How to customise the input fields?
body: <h2>THE SITUATION:</h2>
  <p>In my Vue app, I am using the <a href="https://docs.amplify.aws/ui/auth/authenticator/q/framework/vue" rel="noreferrer">aws authenticator</a> to handle login/signup. <br>
  I need to customize the style, but it's a bit tricky since its structure is made of shadow DOM.</p>
  <p><a href="https://i.stack.imgur.com/fEmqPm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fEmqPm.png" alt="aws authenticator" /></a></p>
  <h2>MODIFYING VARIABLES:</h2>
  <p>So far I only managed to modify some amplify variables.</p>
  <p><a href="https://i.stack.imgur.com/hNexWm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hNexWm.png" alt="enter image description here" /></a></p>
  <p>This is how I did it:</p>
  <pre class="lang-css prettyprint-override"><code>:root {
    --amplify-background-color: transparent;
    --amplify-secondary-color: white;
    --amplify-primary-contrast: white;
    --amplify-primary-color: #E00C1D;
  }
  </code></pre>
  <p>Side note. Targeteting <code>amplify-sign-in</code> instead of <code>:root</code> would also work, but logically that style would apply only for the login form and not for the signup (<code>amplify-sign-up</code>) form. <br>
  Custom style targeting <code>:root</code> applies to both login and signup form.</p>
  <h2>CUSTOMIZE THE INPUT FIELD:</h2>
  <p>Here is where I got stuck.
  The color of the text inside the input is given by the  <code>--amplify-secondary-color</code> var, which in my case needs to be white. But in this way the text of the input is not visible on a white background.</p>
  <p>This is the HTML structure of the <code>amplify-sign-in</code>. The <code>input</code> is inside <code>amplify-input</code>.
  <a href="https://i.stack.imgur.com/u7IIw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/u7IIw.png" alt="amplify-input" /></a></p>
  <p>This is the style for the <code>.input</code> class. As you can see the color is controlled by the <code>--color</code> var <br>
  <a href="https://i.stack.imgur.com/TY7Mh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TY7Mh.png" alt="enter image description here" /></a></p>
  <p>This is what the <code>--color</code> var refers to:
  <a href="https://i.stack.imgur.com/ZmFUg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZmFUg.png" alt="enter image description here" /></a></p>
  <h2>MY ATTEMPTS:</h2>
  <p>I have tried several approaches but none worked.
  I tried to target the <code>.input</code> class, the <code>input</code>, the <code>amplify-input</code>, or to change the <code>--color</code> var.</p>
  <p>These are some attempts:</p>
  <pre class="lang-css prettyprint-override"><code>:host {
    --color: red !important;
  }
  
  :host(.input) {
    color: red !important;
    --color: red !important;
  }
  
  amplify-input {
    --color: red !important;
  
    &amp; .input {
      color:red !important;
      --color: red !important;
    }
  }
  </code></pre>
  <h3>THE DOCS:</h3>
  <p>This are the <a href="https://docs.amplify.aws/ui/customization/customizing-css/q/framework/vue" rel="noreferrer">docs</a> concerning the css customization. Unfortunately the documentation is quite poor</p>
  <h3>TESTING:</h3>
  <p>The quickest way to set a working example, using Vue, would be to setup this sample from the amplify-js-samples package: <a href="https://github.com/aws-amplify/amplify-js-samples/tree/main/samples/vue/auth/authenticator" rel="noreferrer">https://github.com/aws-amplify/amplify-js-samples/tree/main/samples/vue/auth/authenticator</a></p>
  <h3>THE QUESTION:</h3>
  <p>How can I modify the input text of the aws authenticator?</p>