CSS User Interface

cursors से आगे, जिनकी अपनी dedicated coverage पहले से CSS Cursor में है, CSS में मुट्ठी भर properties हैं जो specifically यह control करने पर focused हैं कि form elements और interactive UI browser level पर कैसे दिखें और behave करें।

In this page:

appearance: Native Form Styling हटाना
accent-color: Quick Native Control Coloring
caret-color: Text Cursor का Blink
outline-offset: एक Focus Ring को Space देना
user-select: Text Selection को Control करना

Syntax

css

selector {
  cursor: value;
  resize: value;
  user-select: none | text | all;
  outline: value;
}

appearance: Native Form Styling हटाना

Browsers checkboxes, radio buttons, और select dropdowns जैसे form elements पर अपनी native OS-level styling लागू करते हैं। appearance property, आमतौर पर none set की जाती है, इस native styling को हटा देती है ताकि आप इसके बजाय पूरी तरह custom CSS लागू कर सकें, जो किसी custom-styled form control बनाने का पहला step है।

Note:

Accepted values:
auto — default, native look
none — native styling हटाता है
textfield | menulist-button — compat values, कुछ browsers में auto या एक specific look जैसे act करती हैं
webkit-appearance: none — पुराना WebKit prefix
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: appearance: Removing Native Form Styling

css

<style>
input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid gray;
}
</style>
<input type="checkbox">

accent-color: Quick Native Control Coloring

जब आपको पूरी custom control styling की ज़रूरत नहीं है, accent-color आपको browser की native control shape और behavior बनाए रखते हुए बस किसी checkbox, radio button, range slider, या progress bar को अपने brand से match करने के लिए recolor करने देता है — appearance: none से कहीं ज़्यादा lightweight option।

Note:

Accepted values:
auto — default, browser का accent color
<color> — जैसे rebeccapurple
नोट: checkbox, radio, range और progress पर लागू होता है
नोट: dark themes के लिए color-scheme के साथ जुड़ता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: accent-color: Quick Native Control Coloring

css

<style>
input {
  accent-color: crimson;
}
</style>
<input type="checkbox" checked>
<input type="range">

caret-color: Text Cursor का Blink

caret-color किसी input या textarea के अंदर blinking text-insertion cursor का color बदलता है। dark-themed forms पर यह एक छोटी लेकिन noticeable detail है, जहाँ default black caret किसी dark background के खिलाफ लगभग invisible हो सकती है।

Note:

Accepted values:
auto — default, आमतौर पर current text color
<color> — जैसे tomato
transparent — caret को hide करता है
currentcolor — text color जैसा ही
नोट: input, textarea और editable elements पर लागू होता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: caret-color: The Text Cursor Blink

css

<style>
input {
  background: #222;
  color: white;
  caret-color: lime;
}
</style>
<input type="text" value="Dark theme input">

outline-offset: एक Focus Ring को Space देना

outline-offset किसी element के edge और उसके outline (आमतौर पर एक focus ring) के बीच space जोड़ता है, ring को border के खिलाफ flush बैठने के बजाय बाहर की तरफ़ धकेलते हुए। यह rounded elements पर खासतौर पर उपयोगी है, जहाँ एक flush outline curve के खिलाफ cramped दिखेगी।

Note:

Accepted values:
outline-offset: 0 — default, outline border edge को छूता है
outline-offset: <length> — positive ring को बाहर धकेलता है
outline-offset: -<length> — negative इसे अंदर खींचता है
नोट: outline layout को असर नहीं करता
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: outline-offset: Spacing a Focus Ring

css

<style>
button {
  border-radius: 50%;
  outline: 2px solid blue;
  outline-offset: 4px;
}
</style>
<button>Round</button>

user-select: Text Selection को Control करना

user-select control करता है कि किसी element के अंदर text को user select/highlight कर सकता है या नहीं। इसे none set करना button labels या drag handles जैसे UI chrome पर common है, जहाँ interaction के दौरान accidental text selection टूटा हुआ दिखता है, जबकि normal content text को हमेशा उसकी default auto value पर छोड़ना चाहिए।

Note:

Accepted values:
auto — default behavior
none — text select नहीं किया जा सकता
text — text select किया जा सकता है
all — एक click पूरे element को select कर लेता है
contain — selection element के अंदर ही रहता है
webkit-user-select — Safari के लिए अभी भी prefix चाहिए
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: user-select: Controlling Text Selection

css

<style>
.label {
  user-select: none;
}
</style>
<button class="label">Drag handle, not selectable</button>

Live Example

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Will Change Next Lesson → CSS Print Styles

CSS User Interface

appearance: Native Form Styling हटाना

accent-color: Quick Native Control Coloring

caret-color: Text Cursor का Blink

outline-offset: एक Focus Ring को Space देना

user-select: Text Selection को Control करना

Chapter Quiz — Complete all 25 topics to unlock

Login to run this code