title: How do I convert CSS to Styled-Components with input[type="submit"] attribute?
body: <p>How do I convert standard CSS with special attributes like "type" and "active", to Styled-Components consts?</p>
  
  <pre><code>.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: #fff;
    padding: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
  
  input[type='submit'] {
    background: #00aec9;
    color: #fff;
    cursor: pointer;
    margin-bottom: 0;
    text-transform: uppercase;
    width: 100%;
    border-radius: 5px;
    height: 35px;
    border-color: transparent;
    box-shadow: 0px;
    outline: none;
    transition: 0.15s;
    text-align: center;
  }
  
  input[type='submit']:active {
    background-color: #f1ac15;
  }
  </code></pre>
  
  <p>I managed to create the const for the .box CSS class but not sure how to achieve this with "input[type='submit']" and "input[type='submit']:active"</p>
  
  <pre><code>//---- .box class ------ //
  const DivBox = styled.div`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: #fff;
    padding: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  `
  </code></pre>
  
  <p>Any assistance would be greatly appreciated</p>
  
  <p>PS, I am using React and Nextjs</p>
  
  <p><strong>What I currently have:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/XqHL3.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/XqHL3.gif" alt="enter image description here"></a></p>
  
  <p><strong>What I want:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Ii632.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/Ii632.gif" alt="enter image description here"></a></p>
  
  <p>My current Component Code:</p>
  
  <pre><code>import Layout from '../components/MyLayout.js'
  import styled from 'styled-components'
  
  const DivBox = styled.div`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: #fff;
    padding: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  `
  
  const Input = styled.input.attrs({ type: 'submit' })`
    background: #00aec9;
    color: #fff;
    cursor: pointer;
    margin-bottom: 0;
    text-transform: uppercase;
    width: 100%;
    border-radius: 5px;
    height: 35px;
    border-color: transparent;
    box-shadow: 0px;
    outline: none;
    transition: 0.15s;
    text-align: center;
    &amp;:active {
      background-color: #f1ac15;
    }
  `
  
  export default function About() {
    return (
      &lt;Layout&gt;
        &lt;DivBox&gt;
          &lt;p&gt;This is the about page&lt;/p&gt;
          &lt;h2&gt;Sample Form&lt;/h2&gt;
          &lt;div className="form-label-group"&gt;
            &lt;input
              type="email"
              id="inputEmail"
              className="form-control"
              placeholder="Email address"
              required
              autoFocus
            /&gt;
            &lt;label htmlFor="inputEmail"&gt;Email address&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div className="form-label-group"&gt;
            &lt;input
              type="password"
              id="inputPassword"
              className="form-control"
              placeholder="Password"
              required
            /&gt;
            &lt;label htmlFor="inputPassword"&gt;Password&lt;/label&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;input type="submit" value="Submit" /&gt;
          &lt;/div&gt;
        &lt;/DivBox&gt;
      &lt;/Layout&gt;
    )
  }
  </code></pre>
  
  <p>Additional CSS: </p>
  
  <pre><code>.form-control:focus {
    border-color: #00aec9;
    box-shadow: 0 0 0 0.2rem rgba(19, 162, 228, 0.25);
  }
  
  .form-label-group input:not(:placeholder-shown) ~ label {
    color: #00aec9;
  }
  </code></pre>