How do I convert CSS to Styled-Components with input[type="submit"] attribute?

Question

How do I convert standard CSS with special attributes like "type" and "active", to Styled-Components consts?

.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;
}

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"

//---- .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);
`

Any assistance would be greatly appreciated

PS, I am using React and Nextjs

What I currently have:

What I want:

My current Component 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;
  &:active {
    background-color: #f1ac15;
  }
`

export default function About() {
  return (
    <Layout>
      <DivBox>
        <p>This is the about page</p>
        <h2>Sample Form</h2>
        <div className="form-label-group">
          <input
            type="email"
            id="inputEmail"
            className="form-control"
            placeholder="Email address"
            required
            autoFocus
          />
          <label htmlFor="inputEmail">Email address</label>
        </div>

        <div className="form-label-group">
          <input
            type="password"
            id="inputPassword"
            className="form-control"
            placeholder="Password"
            required
          />
          <label htmlFor="inputPassword">Password</label>
        </div>
        <div>
          <input type="submit" value="Submit" />
        </div>
      </DivBox>
    </Layout>
  )
}

Additional CSS:

.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;
}

Answer 1

I guess you can achieve that by:

const Input = styled.input.attrs({ 
  type: 'submit',
  value: '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;
  &:active {
    background-color: #f1ac15;
  }
`

And replace

<input type="submit" value="Submit" />

with

<Input />

More informations on attrs here