default یک pseudo-class است که از آن برای انتخاب عنصر پیشفرض در بین یک گروه از عناصر همجنس مورد استفاده قرار می گیرد.
عناصر زیر می توانند حالت پیشفرض یا default داشته باشند که در نتیجه در CSS می توان این عناصر را توسط انتخابگر :default
هدف قرار داد:
– آیتم های موجود در context menu
– عناصر button
– آیتم های عنصر select
– آیتم پیشفرض عنصر menu
از نوع pop-up
– دکمه های چک باکس و رادیو که ویژگی checked
داشته باشند
– عناصر option
در یک select
که دارای ویژگی selected
هستند
به عنوان نمونه در عناصر زیر آیتم آخر می تواند توسط این انتخابگر انتخاب شود:
<select>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value="" selected></option>
</select>
option:default {
color: yellow;
font-style: italic;
}
نمونه های دیگری از استفاده این انتخابگر در ادامه آمده است:
button:default {
border: 1px dotted #009966;
}
input[type="submit"]:default {
color: green;
}
input[type="checkbox"]:default + label {
text-decoration: line-through;
}
در دموی زیر ویژگی های عناصر فرم را با دقت بررسی کنید:
See the Pen :default by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگر ها
انتخابگر :default
در کروم +10 , فایرفاکس +4, سافاری +5 , اپرا +10 و +5 iOS پشتیبانی می شود.
اینترنت اکسپلورر به هیچ عنوان این انتخابگر را پشتیبانی نمی کند و اندروید پشتیبانی ناقصی دارد.
متاسفانه فعلا مرورگرهای متفاوت رفتارهای متفاوتی در مورد عناصر متفاوت برای این انتخابگر از خود نشان می دهند :)
برای بررسی دقیق پشتیبانی مرورگرها و بررسی تفاوت های هریک به این آدرس مراجعه کنید.
سلام جناب سیدی عزیز
میشه بفرمایید که تفاوت بین سودوکلاس :checked و :default به طور خاص در مورد ورودی های از نوع چک باکس چی هست؟