ပျူဒိုကလပ်စ် focus-within

ပျူဒိုကလပ်စ် focus-within သည် အာရုံစိုက်ထားသော အရာများအတွက် ပုံစံကို သတ်မှတ်ပေးသည်။ ပျူဒိုကလပ်စ် focus သည် တိုက်ရိုက်အရာ၏ ပုံစံကိုသာ သတ်မှတ်ပေးသော်လည်း focus-within သည် မိဘအရာအတွက် ပုံစံသတ်မှတ်ပေးသည်။

ဝါကျဖွဲ့စည်းပုံ

cssရွေးချယ်သူ:focus-within {

}

ဥပမာ

၎င်း၏ သားအရာ အင်ပူတ်သည် အာရုံစိုက်ထားသောအခါ မိဘအရာ၏ နောက်ခံအရောင်ကို အပြာရောင်သတ်မှတ်ကြည့်ရအောင်။

html<div>
  သင်၏ အမည်ကို ရိုက်ထည့်ပါ။ <input name="user">
</div>
cssdiv {
  width: 300px;
  height: 50px;
  padding: 10px;
}
div:focus-within {
  background-color: #C2DDFD;
}

Результат:

ဒါလဲကြည့်ပါ

  • ပျူဒိုကလပ်စ် :indeterminate,
    အခြေအနေမသတ်မှတ်ရသေးသော ခလုတ်များအတွက် ပုံစံသတ်မှတ်ပေးသည်
  • ပျူဒိုကလပ်စ် :default,
    စံထားရှိသော အရာများအတွက် ပုံစံသတ်မှတ်ပေးသည်
  • ပျူဒိုကလပ်စ် :fullscreen,
    ဖန်သားပြင်အပြည့်အဆင့်တွင် ရှိသော အရာများအတွက် ပုံစံသတ်မှတ်ပေးသည်
  • ပျူဒိုကလပ်စ် :placeholder-shown,
    အကူအညီစာသားပြသနေစဉ် အရာများအတွက် ပုံစံသတ်မှတ်ပေးသည်
  • ဂုဏ်သတ္တိ caret-color,
    အင်ပူတ်အတွင်းရှိ စာသားညွှန်တံ၏ အရောင်ကို သတ်မှတ်ပေးသည်