pure-css
  1. pure-css-input-sizing
PreviousNext

Pure CSS Input Sizing

  • The input element is a fundamental part of web forms, and it's essential to have control over its size for a better user experience.
  • CSS provides various properties to adjust the size of input elements.

Use

Adjusting input size can be beneficial in creating visually appealing and responsive forms. It helps in maintaining a consistent layout and improves the overall aesthetics of your web page.

Advantage

  • Use relative units like percentages or em to create responsive designs that adapt to different screen sizes.
  • Consider the content and purpose of the input field when determining its size.
  • Test the input sizing across various devices to ensure a seamless user experience.

Example

Input elements have fluid width sizes in a syntax that is similar to Pure Grids. 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
</head>

<body>
  <form class="pure-form">
    <input type="text" class="pure-input-1" placeholder=".pure-input-1" />
    <br />
    <input type="text" class="pure-input-2-3" placeholder=".pure-input-2-3" />
    <br />
    <input type="text" class="pure-input-1-2" placeholder=".pure-input-1-2" />
    <br />
    <input type="text" class="pure-input-1-3" placeholder=".pure-input-1-3" />
    <br />
    <input type="text" class="pure-input-1-4" placeholder=".pure-input-1-4" />
    <br />
  </form>
</body>

</html>
Try Playground

Example-2

You can control input sizing even further by wrapping them in grid containers.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
</head>

<body>
  <form class="pure-form pure-g">
    <div class="pure-u-1-4">
      <input type="text" class="pure-input-1" placeholder=".pure-u-1-4" />
    </div>
    <div class="pure-u-3-4">
      <input type="text" class="pure-input-1" placeholder=".pure-u-3-4" />
    </div>
    <div class="pure-u-1-2">
      <input type="text" class="pure-input-1" placeholder=".pure-u-1-2" />
    </div>
    <div class="pure-u-1-2">
      <input type="text" class="pure-input-1" placeholder=".pure-u-1-2" />
    </div>
    <div class="pure-u-1-8">
      <input type="text" class="pure-input-1" placeholder=".pure-u-1-8" />
    </div>
    <div class="pure-u-1-8">
      <input type="text" class="pure-input-1" placeholder=".pure-u-1-8" />
    </div>
    <div class="pure-u-1-4">
      <input type="text" class="pure-input-1" placeholder=".pure-u-1-4" />
    </div>
    <div class="pure-u-1-2">
      <input type="text" class="pure-input-1" placeholder=".pure-u-1-2" />
    </div>
    <div class="pure-u-1-5">
      <input type="text" class="pure-input-1" placeholder=".pure-u-1-5" />
    </div>
    <div class="pure-u-2-5">
      <input type="text" class="pure-input-1" placeholder=".pure-u-2-5" />
    </div>
    <div class="pure-u-2-5">
      <input type="text" class="pure-input-1" placeholder=".pure-u-2-5" />
    </div>
    <div class="pure-u-1">
      <input type="text" class="pure-input-1" placeholder=".pure-u-1" />
    </div>
  </form>
</body>

</html>
Try Playground

Summary

Customizing input sizes using pure CSS provides flexibility in designing forms that match your website's overall look and feel. Understanding the various properties allows you to create user-friendly and visually pleasing input elements.

Checkboxes and RadiosForms
Published on: