ویژگی accent-color در CSS رنگ تاکیدی را که برای کنترل‌های رابط کاربری ایجاد شده توسط برخی عناصر مشخص می‌کند.
این ویژگی به مرورگرها امکان می‌دهد تا عناصر خاصی (مانند ورودی‌های فرم، دکمه‌ها و غیره) را به گونه‌ای تنظیم کنند که از رنگ مشخص شده به عنوان رنگ تاکیدی استفاده شود، به طور معمول برای عناصر رابط کاربری که مرورگر می‌تواند رنگ را تنظیم کرده و به سلیقه یا ترجیحات کاربر پیش بینی کند.
عناصر HTML زیر در حال حاضر توسط accent-color در مرورگرهایی که آن را پشتیبانی می‌کنند تحت تاثیر قرار می‌گیرند:
<input type="checkbox"><input type="radio"><input type="range"><progress>
رنگ تاکیدی اختصاص داده شده به هر نماینده کاربر متفاوت است تا قابلیت خوانایی و تضاد را اطمینان دهد. این رنگ فقط برای کنترل‌های خاص رابط کاربری در وضعیت‌هایی که قابل اجرا است، اعمال می‌شود.
مقادیر ممکن:
- auto: رنگی از طرف UA انتخاب می‌شود که باید با رنگ تاکیدی پلتفرم هماهنگ شود.
<color>: رنگی را که به عنوان رنگ تاکیدی استفاده می‌شود تعیین می‌کند.
auto Value
این CSS معرف accent-color با مقدار auto مشخص می‌کند که رنگ تاکیدی به طور خودکار اعمال شود.
در مثال زیر، رنگ تاکیدی به طور خودکار بر روی عناصر اعمال می‌شود:
<html>
<head>
<style>
input {
accent-color: auto;
}
</style>
</head>
<body>
<input type="checkbox" id="check" checked>
<label for="check">accent-color: auto</label>
</body>
</html>در این مثال، یک تیک‌باکس با تنظیم accent-color: auto قرار داده شده است. این باعث می‌شود که مرورگر رنگ تاکیدی را به طور خودکار انتخاب کند و اعمال کند.
color Value
این CSS معرف accent-color با مقدار <color> به کاربر این امکان را می‌دهد که رنگ تاکیدی مورد نظر خود را برای عناصر واسط کاربری مشخص کند.
در مثال زیر، دو تیک‌باکس با استفاده از ویژگی accent-color، یکی با رنگ قرمز و دیگری با رنگ زرد تنظیم شده‌اند:
<html>
<head>
<style>
#check1 {
accent-color: red;
}
#check2 {
accent-color: yellow;
}
</style>
</head>
<body>
<input type="checkbox" id="check1" checked>
<label for="check1">Red</label></br>
<input type="checkbox" id="check2" checked>
<label for="check2">Yellow</label>
</body>
</html>در این مثال، accent-color برای هر یک از تیک‌باکس‌ها به طور جداگانه تنظیم شده است. تیک‌باکس اول با رنگ قرمز و تیک‌باکس دوم با رنگ زرد نمایش داده می‌شود.
color With Different HTML Element
این مثال نشان می‌دهد که چگونه ویژگی accent-color برای عناصر HTML مختلف استفاده می‌شود:
<html>
<head>
<style>
input[type=radio] {
accent-color: red;
}
input[type=range] {
accent-color: rgb(55, 255, 0);
}
progress {
accent-color: violet;
}
</style>
</head>
<body>
<h3>accent-color for radio buttons</h3>
<input type="radio" id="radio1" name="gender" checked>
<label for="radio1">Male</label></br>
<input type="radio" id="radio2" name="gender">
<label for="radio2">Female</label>
<h3>accent-color for a range</h3>
<label for="ran">Range</label></br>
<input type="range" id="ran" name="range_val" min="0" max="5">
<h3>accent-color for a progress</h3>
<label for="prog">Progress</label></br>
<progress id="prog" name="prog_val"value="60" max="100">60%</progress>
</body>
</html>در این مثال، ویژگی accent-color برای سه نوع عنصر مختلف تنظیم شده است:
- برای دکمه‌های رادیویی (radio buttons)، رنگ قرمز انتخاب شده است.
- برای نوارهای رنج (range inputs)، رنگ سبز با مقدار RGB (55، 255، 0) انتخاب شده است.
- برای عنصر پیشرفت (progress element)، رنگ بنفش انتخاب شده است.
با استفاده از این ویژگی، می‌توانید رنگ تاکیدی (accent color) مورد نظر خود را برای عناصر واسط کاربری مشخص کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام