الفرق بين المراجعتين لصفحة: «CSS/caret-color»

من موسوعة حسوب
< CSS
مرئينص الويكي
لا ملخص تعديل
 
لا ملخص تعديل
 
(5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:الخاصية <code>caret-color</code>}}</noinclude>
<noinclude>{{DISPLAYTITLE:الخاصية <code>caret-color</code>}}</noinclude>
الخاصية <code>caret-color</code> في CSS تُحدِّد ما هو لون مؤشر الإدخال النصي (وهي الإشارة التي تظهر للإشارة إلى موضع الحرف النصي الذي سيدخله المستخدم) ضمن عنصر مثل <code>[[HTML/input|<input>]]</code> أو أي عنصر آخر له الخاصية <code>[[HTML/Global Attributes#contenteditable|contenteditable]]</code>. الشكل الافتراضي لمؤشر الإدخال هو خطٌ رأسيٌ يومض لتسهيل ملاحظته، ويكون لونه الافتراضي هو الأسود، لكن يمكن تعديله باستخدام هذه الخاصية. <syntaxhighlight lang="css">
الخاصية <code>caret-color</code> في CSS تُحدِّد ما هو لون مؤشر الإدخال النصي (وهي الإشارة التي تظهر للإشارة إلى موضع الحرف النصي الذي سيدخله المستخدم) ضمن عنصر مثل <code>[[HTML/input|<input>]]</code> أو أي عنصر آخر له الخاصية <code>[[HTML/Global Attributes#contenteditable|contenteditable]]</code>. الشكل الافتراضي لمؤشر الإدخال هو خطٌ رأسيٌ يومض لتسهيل ملاحظته، ويكون لونه الافتراضي هو الأسود، لكن يمكن تعديله باستخدام هذه الخاصية.
/* كلمات محجوزة */
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;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
|-
|-
سطر 35: سطر 21:


|}
|}
<syntaxhighlight lang="css">
/* كلمات محجوزة */
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;
</syntaxhighlight>


== أمثلة ==
== أمثلة ==
سطر 64: سطر 68:
الخاصية <code>caret-color</code> تقبل قيمةً واحدةً من القيم التالية.
الخاصية <code>caret-color</code> تقبل قيمةً واحدةً من القيم التالية.


=== القيمة <code>auto</code> ===
=== <code>auto</code> ===
سيختار المتصفحُ القيمةَ الأنسب للون مؤشر الإدخال، وتكون هذه القيمة هي <code>currentcolor</code> في أغلبية الحالات، لكن قد يختار المتصفح لونًا مختلفًا لجعل المؤشر واضحًا، مع الأخذ بالحسبان قيمة <code>currentcolor</code> ولون الخلفية والظلال وغير ذلك.
سيختار المتصفحُ القيمةَ الأنسب للون مؤشر الإدخال، وتكون هذه هي <code>currentcolor</code> في أغلبية الحالات، لكن قد يختار المتصفح لونًا مختلفًا لجعل المؤشر واضحًا، مع الأخذ بالحسبان <code>currentcolor</code> ولون الخلفية والظلال وغير ذلك.
=== القيمة <code>[[CSS/color value|<color>]]</code> ===
=== <code>[[CSS/color value|<color>]]</code> ===
قيمة لونية تضبِط لون مؤشر الكتابة.
قيمة لونية تضبِط لون مؤشر الكتابة.
=== البنية الرسمية ===
=== البنية الرسمية ===
سطر 73: سطر 77:


</syntaxhighlight>
</syntaxhighlight>
==انظر أيضًا==
* صفحة الخاصية <code>[[CSS/cursor|cursor]]</code> التي تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر.
* صفحة الخاصية <code>[[CSS/color|color]]</code> التي تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية ([[CSS/text-decoration|text decorations]]).
== مصادر ومواصفات ==
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-ui-3/#propdef-caret-color CSS Basic User Interface Module Level 3].   
* مواصفة [https://drafts.csswg.org/css-ui-3/#propdef-caret-color CSS Basic User Interface Module Level 3].   
[[تصنيف:CSS]]
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS User Interface]]
[[تصنيف:CSS User Interface|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 08:31، 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>;

انظر أيضًا

  • صفحة الخاصية cursor التي تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر.
  • صفحة الخاصية color التي تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations).

مصادر ومواصفات

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/caret-color&oldid=17817»