title: Keeping placeholder visible when typing
body: <p>I am using React and try to build a website which allows you to analyze your twitter bubble. So, I have a form in which you can search for a twitter username. Thus, I put an &quot;@&quot; as a placeholder into this form, which disappears when you start typing. My goal is that the &quot;@&quot; stays when you start typing, so e.g. I could type &quot;potus44&quot; and it displays &quot;@potus44&quot; in this form (i hope this makes sense). So in the end, the &quot;@&quot; would not disappear but stay in front of the twitter handle.</p>
  <p>See screenshot of my current form: <a href="https://i.stack.imgur.com/k7CYU.png" rel="nofollow noreferrer">Screenshot</a></p>
  <p>This is the code for my form.</p>
  <pre><code>import React, { Component } from 'react'; 
  import { FiTwitter } from &quot;react-icons/fi&quot;;
  
  const app = {
      options: []
  };
  
  const onFormSubmit = (e) =&gt; {
      e.preventDefault();
  
      const option = e.target.elements.option.value;
  
      if (option) {
          app.options.push(option);
          e.target.elements.option.value = '';
      }
  }
  
  class Homepage extends Component {
      render () {
          return (
              &lt;div className=&quot;homepage&quot;&gt;
                  &lt;div className=&quot;container-pagecontent&quot;&gt;
                  &lt;main style={{marginTop: '150px'}}&gt;
                  &lt;h1 id=&quot;home&quot; &gt;Analyse your bubble! &lt;FiTwitter size=&quot;.8em&quot; /&gt;&lt;/h1&gt;
                  &lt;p&gt;Search for your bubble.&lt;/p&gt;
                  &lt;form onSubmit={onFormSubmit}&gt;
                      &lt;input placeholder=&quot;@&quot; className =&quot;input&quot; type=&quot;text&quot; name=&quot;option&quot;/&gt;
                      &lt;button className=&quot;button&quot;&gt;Suchen&lt;/button&gt;
                  &lt;/form&gt;
                  &lt;/main&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Homepage
  
  </code></pre>
  <p>And this is my scss (in case it might be useful for you).</p>
  <pre><code>.button {
      background-color: #1763A5;
      font-family: bergen;
      color: white;
      border: 2px solid #1763A5;
      padding: 6px;
      font-size: 18px;
      border-radius: 6px;
      margin-left: 10px;
      transition-duration: 0.4s;
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
      outline: none;
  }
  
  .button:hover {
      background-color: white;
      color: #1763A5;
      box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  }
  
  .input {
      width: 150px;
  }
  
  input[type=text] {
      width: 170px;
      padding: 7px 10px;
      margin: 12px 0;
      margin-right: 2px; 
      box-sizing: border-box;
      border: 2px solid #1763A5;
      border-radius: 6px;
      box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
      outline: none;
    }
  </code></pre>
  <p>and the code for the &quot;container-pagecontent&quot;:</p>
  <pre><code>.container-pagecontent {
      max-width: 95rem;
      margin: 0 auto;
      padding: 0 $m-size;
      width: 100%;
      text-align: center;
  }
  </code></pre>
  <p>Thanks in advance for your help. Let me know if you need more insights into the project.</p>