CSS is a language for creating style sheets that describe how a document is presented in a markup language, such as HTML or XML. Along with HTML and JavaScript, CSS is a key component of the World Wide Web. Using CSS, users can style all HTML elements, including tables, buttons, input fields, forms, and many more.
This post will explain:
How to Style Input Fields With CSS?
To style the input field with CSS, try out the mentioned procedure.
Step 1: Create Input Form
First of all, create a form in HTML. To do so, follow the instructions listed below:
- First, create a form with the help of the “<form>” tag.
- Inside the form, the “<label>” element is defined to specify captions for the “input” elements. The label’s “for” attribute is used to attach the label element with <input> element through “id”.
- The “type” attribute determines the input type, such as text or number.
- The “class” attribute is assigned the “Input” name, “placeholder” attribute allocates the placeholder text in the input field:
<label for="entertext1" >Enter First Name</label>
<input type="text" class="Input" placeholder="Enter First Name here" /><br><br>
<label for="entertext2">Enter Last Name</label>
<input type="number" class="Input" placeholder="Enter Last Name here" /><br><br>
</form>
Output
Step 2: Style Input Button in CSS
To style the input button in CSS, check out the given properties:
padding: 8px;
border-radius: 10px;
margin: 5px auto;
border: 1px solid #918383;
background-color: #87b8b8;
box-shadow: 1px 2px 1px 2px rgb(230, 229, 229);
color: #c9c2c2;
outline: none;
font-size: 18px;
}
Access the “input” class and then apply below-mentioned properties:
- Set “padding” that specifies the space around the element’s content.
- “border-radius” property sets the element’s edges round.
- “margin” property with the value “5px auto” adds space “5px” on top and bottom, and “auto” is used to set equal space around the element on the left and right.
- “border” property specifies the border around the table.
- “background-color” property is utilized to specify the color of the background.
- “box-shadow” adds a shadow around the element. It is a shorthand property that specifies the x-offset, y-offset, blur effect, spread effect, and color for the shadow.
- “color” property refers to the element’s font color.
- “outline” adjusts the line around the elements to make it dominant.
- “font-size” property is utilized to set the element’s font size.
Output
Next, access the “label” element for styling it:
font-size: 18px;
color: rgb(15, 15, 15);
margin: 20px;
}
After accessing the label element, apply the styling of your choice. For instance, we have applied “font-size”, “color”, and “margin” properties.
Output
Let’s move toward the next section to style the submit button using CSS.
How to Style Submit Button With CSS?
To style the submit button with CSS, examine the example below, which demonstrates a step-wise guide on how to create and style the HTML button.
Step 1: Create Submit Button
Initially, add heading text inside the heading tag “<h2>”. Then, create a button by utilizing the “<button>” element and set the button type as “submit”:
<button type=submit >
Submit
</button>
Output
Step 2: Style “button” Element
To style the button in CSS, check out the properties described below:
padding: 12px 40px;
border-radius: 8px;
box-shadow: 2px 2px 2px 1px rgb(131, 131, 219) ;
border: 1px solid gray;
font-size: 20px;
}
Access the button element by tag name and apply the properties on the button according to your preference. For instance, we have applied “padding”, “border-radius”, “box-shadow”, “border”, and “font-size” properties.
Output
Let’s add the hover effect on the button element:
background-color: cadetblue;
color: rgb(246, 244, 248);
}
The “button:hover” selector is utilized to apply the effect of hover on the button. With the help of the “hover” selector, users can generate the CSS effect in real-time. For instance, we have set the “background-color” and “color” properties as described above:
We have discussed to style the input field and submit button with CSS.
Conclusion
To style the input element and submit button with CSS, different properties of CSS are used, including “padding”, “border-radius”, “box-shadow”, “margin”, “border”, “background-color”, “font-size” and many more. Users can apply the specified properties by accessing the elements through the tag name. This post has demonstrated the method for styling the input text fields and submit buttons with CSS.
