pure-css
  1. pure-css-rounded-inputs
PreviousNext

Pure CSS Rounded Inputs

  • Pure CSS Rounded Inputs is a CSS styling technique used to create input fields with rounded corners.
  • It is a great way to add a modern look and feel to forms without having to use any images or JavaScript.

Use

Pure CSS Rounded Inputs can be used for any web application or website that has input fields like forms or search bars. It can enhance the overall user experience by making the inputs look more attractive and engaging.

Advantage

Using Pure CSS Rounded Inputs has many advantages, it is highly customizable, lightweight, easily implemented, and it doesn't require any external dependencies or images. This means that pages can load much faster and there is no need for an extra server request for images, which would result in more HTTP requests.

Example

Here is an example of an HTML form with rounded input fields.

<!DOCTYPE html>
<html>

<head>
  <title>Pure CSS Rounded Inputs Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
  <style>
    .pure-input-rounded {
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      padding: 5px;
      border: solid 1px #ccc;
      background: #fff;
      width: 80%;
      max-width: 500px;
      margin-bottom: 10px;
    }

    .pure-button-primary {
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: #0078E7;
      color: #fff;
      padding: 10px 20px;
      border: none;
      text-transform: uppercase;
      font-size: 1rem;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .pure-button-primary:hover {
      background: #3066BE;
    }
  </style>
</head>

<body>
  <form>
    <fieldset class="pure-group">
      <input type="text" class="pure-input-rounded" placeholder="Enter your name">
      <input type="email" class="pure-input-rounded" placeholder="Enter your email">
      <input type="password" class="pure-input-rounded" placeholder="Enter your password">
      <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
  </form>
</body>

</html>
Try Playground

In this example, we have used the pure-input-rounded class to create the rounded input fields, and applied the styling options to create the primary button.

Summary

Pure CSS Rounded Inputs is a useful CSS styling technique for creating attractive and modern input fields in web applications and websites. It offers many advantages such as customizability, lightweight nature, and easy implementation and doesn't require any images or external dependencies. Use it to enhance your forms and make them more engaging for your users.

InputsCheckboxes and Radios
Published on: