## Style the Element container

Style the container you mount an [Element](/js/element.md) to as if it were an `<input>` on your page.
For example, to control `padding` and `border` on an `Element`, set these properties on the container.
This is usually done by re-using the classes that you have applied to your DOM `<input>` elements.
After the `Element` is mounted, the `.StripeElement` class is added to the container.
Additionally, the following classes are automatically added to the container when the `Element` is complete, empty, focused, invalid, or autofilled by the browser:

* `.StripeElement--complete`
* `.StripeElement--empty`
* `.StripeElement--focus`
* `.StripeElement--invalid`
* `.StripeElement--webkit-autofill` (Chrome and Safari only)

These class names can be customized using the `classes` [option](/js/elements_object/create_element.md#elements_create-options-classes) when you [create an Element](#elements_create).

### The Element container

```html
<style>
  .my-input {
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

<form>
  <div>
    <label>Name</label>
    <input class="my-input">
  </div>
  <div>
    <label>Card</label>
    <!-- Using the same "my-input" class on the -->
    <!-- regular input above and on this container. -->
    <div class="my-input" id="card-element"></div>
  </div>
</form>
```