• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS User Interface Quiz

Q1: Which property changes the mouse pointer appearance?

A. hover-style
B. cursor
C. pointer-action
D. style-pointer

Q2: Which value disables resizing of a <textarea>?

A. resize: off;
B. resize: none;
C. resizable: false;
D. resize: disable;

Q3: Which property disables text selection?

A. user-select
B. text-select
C. disable-selection
D. pointer-select

Q4: Which CSS property removes all mouse events from an element?

A. user-select: none;
B. pointer-events: none;
C. disable-mouse: true;
D. cursor: none;

Q5: What is the default value of box-sizing?

A. border-box
B. content-box
C. padding-box
D. auto-box

Q6: How do you show a wait icon when hovering over a button?

A. cursor: wait;
B. pointer: wait;
C. mouse: wait;
D. hover: wait;

Q7: Which property changes the color of the text cursor in input?

A. caret-color
B. cursor-color
C. input-cursor
D. color-caret

Q8: How to allow vertical resize only in a textarea?

A. resize: vertical;
B. resize: y-axis;
C. resize-y: true;
D. scroll: vertical;

Q9: How do you apply the same box-sizing to all elements?

A. * { box-sizing: border-box; }
B. all { box-sizing: border-box; }
C. body { box-sizing: inherit; }
D. :root { box-sizing: all-box; }

Q10: What happens if pointer-events: none; is set?

A. Element becomes draggable
B. Element cannot be clicked or hovered
C. Text becomes selectable
D. Cursor disappears
← Previous Next →
Login
Go Back Top