Inputs & pseudo elements form

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Inputs & pseudo elements</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="./style.css"> </head> <body>  <div class="wrapper"> <h1> Inputs & pseudo elements </h1> <ul> <li> <b> <input type="text"> </b> <input type="text"> </li> <li> <b> <input type="radio"> </b> <input type="radio"> </li> <li> <b> <input type="checkbox"> </b> <input type="checkbox"> </li> <li> <b> <input type="range"> </b> <input type="range"> </li> <li> <b> <input type="color"> </b> <input type="color"> </li> <li> <b> <input type="button"> </b> <input type="button" value="Click me"> </li> <li> <b> <input type="submit"> </b> <input type="submit" value="Submit"> </li> <li> <b> <button></button> </b> <button>Button</button> </li> <li> <b> <textarea></textarea> </b> <textarea></textarea> </li> <li> <b> <select></select> </b> <select> <option>hello</option> <option>world</option> </select> </li> </ul> </div>  </body> </html>

.wrapper { max-width: 600px; margin: 2rem auto 1rem; } H1 { text-align: center; } UL { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; margin: 1rem 0; padding: 0; list-style: none; font: 16px/1.4 Arial, sans-serif; } LI { padding: .5rem; outline: 1px solid #DDD; } INPUT, BUTTON, TEXTAREA, SELECT { display: block; margin-top: 1rem; } INPUT::before, BUTTON::before, TEXTAREA::before, SELECT::before { content: '::before'; margin: 0 .5rem; padding: 0 .25rem; background: rgba(255, 68, 0, 0.65); color: white; }

This is an example of a web form with input types and pseudo-elements, designed using HTML, CSS, and Bootstrap framework 4. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the icons and elements in an orderly manner. There are eight types of inputs and elements displayed on the form, which are text¸ radio, checkbox, range, color, button, text area, and Select. The wrapper class is given the styles of max-width as 600px, margin as 2rem auto 1rem. The header of the form is given a text-align style as center. The list items are displayed in a grid, and the number of columns for the grid is defined as 2. The grid-gap is set as 1rem, with the font-style for the list items is set as 16px/1.4 Arial, sans-serif. An outline style of 1px solid #DDD is set for the list item box, with a padding value as .5rem. Source: https://codepen.io/yoksel/pen/eYNmRNe

Inputs & pseudo elements form

Post Comment or Questions Cancel reply

Several Related Snippets