Prev Next

CSS User Interface

The CSS User Interface (UI) module provides properties to control the appearance and behavior of UI elements, enhancing the user experience. These properties include controls for resizing, cursor styles, outlining focus, and element interactions.

Key Topics

Cursor

The cursor property specifies the type of cursor to display when hovering over an element.

<style>
        .cursor-pointer {
            cursor: pointer;
        }
        .cursor-not-allowed {
            cursor: not-allowed;
        }
</style>
<button class="cursor-pointer">Clickable Button</button>
<button class="cursor-not-allowed" disabled>Disabled Button</button>

Explanation: The cursor changes to a pointer when hovering over a clickable button and to a "not-allowed" icon when hovering over a disabled button.

Resize

The resize property controls if and how an element can be resized by the user.

<style>
        .resize-both {
            resize: both;
            overflow: auto;
            width: 200px;
            height: 100px;
            border: 1px solid #ccc;
        }
        .resize-none {
            resize: none;
            width: 200px;
            height: 100px;
            border: 1px solid #ccc;
        }
</style>
<textarea class="resize-both">Resizable both ways</textarea>
<textarea class="resize-none">Not resizable</textarea>

Explanation: The first textarea can be resized in both directions, while the second one is not resizable.

Outline

The outline property is used to style the focus ring of an element, often applied to enhance accessibility.

<style>
        .outline-custom {
            outline: 2px dashed #28A745;
        }
        .outline-none {
            outline: none;
        }
</style>
<input class="outline-custom" type="text" placeholder="Custom Outline">
<input class="outline-none" type="text" placeholder="No Outline">

Explanation: The first input field has a green dashed outline, while the second one has no visible outline.

Caret Color

The caret-color property specifies the color of the text input caret (blinking cursor).

<style>
        .caret-red {
            caret-color: red;
        }
        .caret-blue {
            caret-color: blue;
        }
</style>
<input class="caret-red" type="text" placeholder="Red Caret">
<input class="caret-blue" type="text" placeholder="Blue Caret">

Explanation: The caret color for the first input field is red, while it is blue for the second input field.

Key Takeaways

  • Cursor: Use the cursor property to indicate the action associated with an element.
  • Resize: Allow or restrict element resizing using the resize property.
  • Outline: Customize focus outlines for better visibility and accessibility.
  • Caret Color: Style the caret in text inputs to match your design.
  • Accessibility: Ensure interactive elements have visible focus styles for improved usability.
Prev Next