• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS User Interface

← Previous Next →

🔹 What is CSS User Interface?

CSS User Interface (UI) refers to a set of CSS properties that control how elements behave visually in response to user interaction. These include cursor behavior, element resizing, text selection, and how elements are focused.

UI properties improve user experience by making websites more interactive and user-friendly.

🔸 Common CSS UI Properties

Property Description
cursor Changes the mouse cursor when hovering over an element
resize Allows elements (like textareas) to be resizable
outline A line drawn around an element (often for focus)
box-sizing Controls box model calculation
user-select Enables or disables text selection
pointer-events Enables or disables mouse interactions
caret-color Changes the color of the text input cursor

🔸 Examples of UI Properties

1. Cursor Property
button {
  cursor: pointer;
}

Available values: default, pointer, wait, move, text, crosshair, not-allowed, etc.

2. Resize Property
textarea {
  resize: both; /* horizontal, vertical, none, both */
}
3. User Select
p {
  user-select: none; /* disables text selection */
}
4. Pointer Events
button.disabled {
  pointer-events: none; /* disables click */
  opacity: 0.5;
}
5. Caret Color
input {
  caret-color: red;
}

Practice Questions

✅ Write CSS for the following:

Q1. Change the cursor to a hand icon on a clickable element.

Q2. Disable text selection for a paragraph.

Q3. Make a <textarea> resizable only vertically.

Q4. Hide the default focus outline on buttons.

Q5. Change the caret color in an input field.

Q6. Apply box-sizing: border-box to all elements.

Q7. Prevent clicks on a disabled button using pointer-events.

Q8. Make an image unselectable using user-select.

Q9. Add a custom move cursor for draggable items.

Q10. Highlight focused input fields with a green outline.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top