title: Styling input border on first focus using styled components
body: <p>I have an input that's styled with <code>styled components</code>. It has a <code>min</code> and <code>max</code> number, and it's passed down as props to give a red border:</p>
  
  <pre><code>export const StyledInput = styled.input`
    ::-webkit-inner-spin-button,
    ::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }
    display: block;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    -webkit-appearance: none;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    background-color: #fff;
    border: ${(props) =&gt; (props.option === true ? '0px' : '')};
    line-height: 30px;
    /* vertical-align: middle; */
    z-index: 1;
    height: 33px;
    width: ${(props) =&gt; (props.numberInputWidth)};
    padding: 0 8px;
    margin-left: 5px;
    margin-top: 20px;
    transition: border-color 0.3s ease-in-out;
  
    &amp;:focus {
      border-color: ${COLORS.LIGHTGREEN};
      transition: border-color 0.3s ease-in-out;
  
      ${({ error }) =&gt; error &amp;&amp; `
        border-color: ${COLORS.ERROR};
      `}
    }
  `
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/uMIEr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uMIEr.png" alt="enter image description here"></a></p>
  
  <p>And my component's state: </p>
  
  <pre><code>this.state = {
    inputTouched: false,
    inputValue: 0,
  }
  </code></pre>
  
  <p>and the error handling prop:</p>
  
  <pre><code>error={!!(inputValue &gt; max || inputValue &lt; min)}
  </code></pre>
  
  <p>So let's say <code>min = 1</code> and <code>max = 100</code>. It's working as intended: </p>
  
  <p><a href="https://i.stack.imgur.com/RI4nA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RI4nA.png" alt="enter image description here"></a></p>
  
  <p>So, when <code>this.state.inputValue</code> is over the min/max, it'll produce a red border indicating an error. However, upon rendering the page, the input is set at <code>0</code>, and clicking into it will give a red border. </p>
  
  <p><a href="https://i.stack.imgur.com/HTwPj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HTwPj.png" alt="enter image description here"></a></p>
  
  <p>I want it to be green initially, and then let the error logic handle it.
  I want it to look like this: <a href="https://i.stack.imgur.com/qFsQY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qFsQY.png" alt="enter image description here"></a> </p>
  
  <p>but <strong>only on initial click</strong></p>
  
  <p>Is there anyway to do so?</p>