CSS UI Elements - Detailed Overview

Introduction to CSS UI Elements

CSS UI elements help create interactive and visually appealing user interfaces. They include buttons, input fields, select boxes, and checkboxes. Styling these elements enhances the user experience and ensures consistency across different browsers and devices.

Examples of CSS UI Elements

Styled Button

Click Me

This example demonstrates a styled button using the .button class. The button has a background color, padding, and border-radius to make it visually appealing. It also includes a hover effect to change the background color when the user hovers over it.

CSS used:


.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.button:hover {
    background-color: #0056b3;
}
                    
<a href="#" class="button">Click Me</a>

Styled Input Field

This example demonstrates a styled input field using the .input-field class. The input field has padding, border, and border-radius for a cleaner look. It also ensures that the field takes up the full width of its container.

CSS used:


.input-field {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}
                    
<input type="text" class="input-field" placeholder="Enter text here">

Styled Select Box

This example shows a styled select box using the .select-box class. The select box has padding, border, and border-radius similar to the input field for a consistent appearance.

CSS used:


.select-box {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}
                    
<select class="select-box">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

Styled Checkboxes

This example illustrates styled checkboxes within a .checkbox-group. Each checkbox is styled with spacing and labels for a clear layout. This helps in organizing multiple checkboxes in a user-friendly manner.

CSS used:


.checkbox-group {
    margin-bottom: 20px;
}

.checkbox-group label {
    display: block;
    margin-bottom: 5px;
}
                    
<div class="checkbox-group">
    <label><input type="checkbox"> Option 1</label>
    <label><input type="checkbox"> Option 2</label>
    <label><input type="checkbox"> Option 3</label>
</div>