الفرق بين المراجعتين لصفحة: «CSS/caret-color»
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 77: | سطر 77: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | == أمثلة == | ||
مثال يوضح تأثير قيمة الخاصية <code>caret-color</code> على لون المؤشر النصي:<syntaxhighlight lang="html"> | |||
<input value="This field uses a default caret." size="64"/> | |||
<input class="custom" value="I have a custom caret color!" size="64"/> | |||
<p contenteditable class="custom">This paragraph can be | |||
edited, and its caret has a custom color as well!</p> | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | |||
input { | |||
caret-color: auto; | |||
display: block; | |||
margin-bottom: .5em; | |||
} | |||
input.custom { | |||
caret-color: red; | |||
} | |||
p.custom { | |||
caret-color: green; | |||
} | |||
</syntaxhighlight> | |||
==انظر أيضًا== | |||
* صفحة الخاصية <code>[[CSS/cursor|cursor]]</code> التي تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر. | * صفحة الخاصية <code>[[CSS/cursor|cursor]]</code> التي تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر. | ||
* صفحة الخاصية <code>[[CSS/color|color]]</code> التي تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية ([[CSS/text-decoration|text decorations]]). | * صفحة الخاصية <code>[[CSS/color|color]]</code> التي تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية ([[CSS/text-decoration|text decorations]]). | ||
مراجعة 08:30، 12 سبتمبر 2018
الخاصية caret-color في CSS تُحدِّد ما هو لون مؤشر الإدخال النصي (وهي الإشارة التي تظهر للإشارة إلى موضع الحرف النصي الذي سيدخله المستخدم) ضمن عنصر مثل <input> أو أي عنصر آخر له الخاصية contenteditable. الشكل الافتراضي لمؤشر الإدخال هو خطٌ رأسيٌ يومض لتسهيل ملاحظته، ويكون لونه الافتراضي هو الأسود، لكن يمكن تعديله باستخدام هذه الخاصية.
بطاقة الخاصية
| القيمة الابتدائية | auto
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | نعم |
| قابلة للحركة | نعم |
| القيمة المحسوبة | قيمة لونية. |
/* كلمات محجوزة */
caret-color: auto;
caret-color: transparent;
caret-color: currentColor;
/* <color> قيم لونية */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);
/* القيم العامة */
text-overflow: inherit;
text-overflow: initial;
text-overflow: unset;
أمثلة
مثال عن استخدام الخاصية caret-color لتغيير لون مؤشر الكتابة في العنصر <input> إلى اللون الأحمر:
<input value="I have a custom caret color!" size="64">
شيفرة CSS:
input {
caret-color: red;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 57 | 53.0 | غير مدعومة | 44 | غير مدعومة |
البنية العامة
الخاصية caret-color تقبل قيمةً واحدةً من القيم التالية.
auto
سيختار المتصفحُ القيمةَ الأنسب للون مؤشر الإدخال، وتكون هذه هي currentcolor في أغلبية الحالات، لكن قد يختار المتصفح لونًا مختلفًا لجعل المؤشر واضحًا، مع الأخذ بالحسبان currentcolor ولون الخلفية والظلال وغير ذلك.
<color>
قيمة لونية تضبِط لون مؤشر الكتابة.
البنية الرسمية
caret-color: auto | <color>;
أمثلة
مثال يوضح تأثير قيمة الخاصية caret-color على لون المؤشر النصي:
<input value="This field uses a default caret." size="64"/>
<input class="custom" value="I have a custom caret color!" size="64"/>
<p contenteditable class="custom">This paragraph can be
edited, and its caret has a custom color as well!</p>
شيفرة CSS:
input {
caret-color: auto;
display: block;
margin-bottom: .5em;
}
input.custom {
caret-color: red;
}
p.custom {
caret-color: green;
}
انظر أيضًا
- صفحة الخاصية
cursorالتي تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر. - صفحة الخاصية
colorالتي تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations).