---
id: 68eb288f63d818e6e2ff246b
title: Step 27
challengeType: 0
dashedName: step-27
---

# --description--

Now, you should style the `input` and `textarea` elements. It's often a good idea to start with general styles for `input` and `textarea`, then refine specific types.

Select `input:not(.contact-method-radio-btn), textarea`. Set `background-color` to `#ffffff1a`, `width` to `95%`, `border` to `1px solid gray`, `border-radius` to `5px`, and `padding` to `10px`.

The `:not(.contact-method-radio-btn)` part excludes radio buttons with that class from being styled by this rule. This way, we can apply general styles to most inputs while keeping radio buttons separate.

These styles will make your form fields wider and more readable. Try previewing the form to see how the layout changes.

# --hints--

You should target `input:not(.contact-method-radio-btn), textarea`.

```js
assert(new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea'));
```

Set the `background-color` property to `#ffffff1a`.

```js
const style = new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea');
assert.strictEqual(style?.backgroundColor, 'rgba(255, 255, 255, 0.1)');
```

Set the `width` property to `95%`.

```js
const style = new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea');
assert.strictEqual(style?.width, '95%');
```

Set the `border` property to `1px solid gray`.

```js
const style = new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea');
assert.strictEqual(style?.border, '1px solid gray');
```

Set the `border-radius` property to `5px`.

```js
const style = new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea');
assert.strictEqual(style?.borderRadius, '5px');
```

Set the `padding` property to `10px`.

```js
const style = new __helpers.CSSHelp(document).getStyle('input:not(.contact-method-radio-btn), textarea');
assert.strictEqual(style?.padding, '10px');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parent Teacher Conference Form</title>
  <link rel="stylesheet" href="./styles.css" />
</head>

<body>
  <main class="container">
    <h1 class="title center">Parent Teacher Conference Form</h1>
    <p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>

    <form>
      <fieldset>
        <legend>Student Information</legend>
        <label for="student-name">Full Name: </label>
        <input
            type="text"
            name="student-name"
            id="student-name"
            required
            placeholder="E.g., Jane Doe"
          />

        <label for="grade">Student Grade: </label>
        <input
            type="number"
            name="grade"
            id="grade"
            required
            placeholder="E.g., 4"
          />
      </fieldset>

      <fieldset>
        <legend>Parent/Guardian Information</legend>
        <label for="parent-name">Parent/Guardian Information: </label>
        <input
            type="text"
            name="parent-name"
            id="parent-name"
            required
            placeholder="E.g., Nancy Doe"
          />
      </fieldset>

      <fieldset>
        <legend>Preferred Contact Method</legend>
        <label class="contact-method" for="email">Email: </label>
        <input
            id="email"
            class="contact-method-radio-btn"
            type="radio"
            name="contact-method"
            value="email"
            checked
          />

        <label class="contact-method" for="phone">Phone: </label>
        <input
            id="phone"
            class="contact-method-radio-btn"
            type="radio"
            name="contact-method"
            value="phone"
          />
      </fieldset>

      <fieldset>
        <legend>Additional Notes</legend>
        <label for="notes"
            >Any specific concerns or topics you'd like to discuss?</label>
        <textarea id="notes" name="notes" rows="4" cols="50"></textarea>
      </fieldset>

      <button class="submit-btn" type="submit">Submit Form</button>
    </form>
  </main>
</body>

</html>
```

```css
body {
  background-color: MidnightBlue;
  color: whitesmoke;
}

.container {
    background-color: #ffffff1a;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    margin: 20px auto;
    padding: 10px 20px;
    box-shadow: 0 5px 15px black;  
}

.center {
  text-align: center;
}

.description {
  font-size: 1.2rem;
}

fieldset {
  border: 1px solid gray;
  border-radius: 5px;
  margin: 20px 0;
  padding: 20px;
}

fieldset legend {
  font-size: 1.3rem;
  font-weight: 600;
}

label {
  font-size: 1.2rem;
}

label:not(.contact-method) {
  display: block;
  margin: 10px 0;
}

--fcc-editable-region--


--fcc-editable-region--
```

