Style input using CSS and add styles on hover and focus.
Here's a breakdown of each property and its purpose:
• The border-radius property adds rounded corners to the input field. In this example, the radius is set to 10px, but you can adjust this value as needed.
• The padding property sets the amount of space between the text inside the input field and the border. A value of 6px creates a 6-pixel padding on all sides.
• Border property sets the width and style of the border around the input field. A value of 2 pixels and solid creates a 2-pixel wide solid border.
• Background-color property sets the background color of the input field. A value of transparent means the background will be transparent, so any elements behind the input field will show through.
• Outline property set to none removes the default focus outline that appears around an input field when it's selected.
• Font-size property sets the font size for the text inside the input field. A value of 20 pixels creates text that is 20 pixels tall.
• Font-family sets the font family for the text inside the input field. A value of sans-serif uses a font that doesn't have decorative serifs.
• Transition property sets a transition effect for the input field. The all value means all properties will transition, and 0.3s sets the duration of the transition to 0.3 seconds. The ease-in-out value sets the easing of the transition, so it starts slow and accelerates in the middle, then slows down again at the end.