title: Why is the placeholder font different and the submit button have additional text in Firefox?
body: <p>The font of the placeholders for the inputs for a form are different in Firefox and I'm trying to figure out why that is and what could be causing that. Why does the submit button have some additional text as well in Firefox</p>
  <p>This is how it's supposed to look (Chrome):</p>
  <p><a href="https://i.stack.imgur.com/pTe4c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pTe4c.png" alt="enter image description here" /></a></p>
  <p>And this is how it looks on Firefox:</p>
  <p><a href="https://i.stack.imgur.com/GSpbQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GSpbQ.png" alt="enter image description here" /></a></p>
  <p>Here is my code:</p>
  <p>HTML:</p>
  <pre><code>&lt;form class=&quot;form appear appear-hidden&quot; method=&quot;post&quot;&gt;
      &lt;h1&gt;Contact Me&lt;/h1&gt;
      &lt;div class=&quot;name-section&quot;&gt;
        &lt;input name=&quot;name&quot; type=&quot;name&quot; placeholder=&quot;Name&quot; required /&gt;
        &lt;input name=&quot;surname&quot; type=&quot;surname&quot; placeholder=&quot;Surname&quot; required /&gt;
      &lt;/div&gt;
      &lt;input name=&quot;email&quot; type=&quot;email&quot; placeholder=&quot;Email&quot; required /&gt;
  
      &lt;textarea
        name = &quot;message&quot;
        type=&quot;message&quot;
        placeholder=&quot;Message&quot;
        row=&quot;4&quot;
        required
      &gt;&lt;/textarea&gt;
  
      &lt;input class=&quot;submit&quot; type=&quot;submit&quot; placeholder=&quot;submit&quot; /&gt;
    &lt;/form&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>form {
    width: 70%;
    margin: auto;
    padding: 100px;
    color: white;
  }
  
  form h1 {
    margin: 5px;
  }
  
  .name-section input {
    width: 48%;
    margin: 5px;
    border: 2px solid white;
    padding: 10px;
    background-color: transparent;
    font-weight: 600;
  }
  
  form input {
    width: 98%;
    margin: 5px;
    border: 2px solid white;
    padding: 10px;
    /* background-color: #000; */
    background-color: transparent;
    font-weight: 600;
    color: white;
    font-family: 'Poppins', sans-serif;
  }
  
  form input:-webkit-autofill,
  form input:-webkit-autofill:hover,
  form input:-webkit-autofill:focus,
  form input:-webkit-autofill:active {
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
    font-family: 'Poppins', sans-serif;
  }
  
  .submit {
    width: 10%;
    padding: 5px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: white;
    /* background-color: #000; */
    background-color: transparent;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
  }
  
  input::placeholder {
    font-family: 'Poppins', sans-serif;
    color: white;
    font-weight: 600;
  }
  
  form input:focus {
    outline: none;
  }
  
  textarea {
    min-height: 100px;
    background-color: transparent;
    color: white;
    font-family: 'Poppins', sans-serif;
    width: 98%;
    margin: 5px;
    border: 2px solid white;
    resize: none;
    font-weight: 600;
    padding: 10px;
  }
  
  textarea:focus {
    outline: none;
  }
  
  textarea::placeholder {
    color: white;
    margin: 10px;
    font-weight: 600;
  }
  
  .submit:hover {
    color: #000;
    background-color: white;
    transition: 0.3s ease-in;
  }
  </code></pre>