Merhaba, bu yazımda CSS İle Ögeleri Pasif Yapmak konusunda bakacağız. Sitemizde herhangi bir input olsun, link olsun , button olsun fare ile tıklanmasını engellemek için kullanabileceğiniz bir css komutudur.
<input type="text" name="kullanici_adi" value="admin" >
<style type="text/css">
input[name=kullanici_adi] {
pointer-events: none;
}
</style>
CSS İle Ögeleri Pasif Yapmak
Bu yazımızda arkadalar, sitemizdeki tıklanabilir herhangi bir ögeyi tıklanamaz hale getirecek CSS komutu göreceğiz. Bu işlemi yaptığımızda tab order üzerinden yine de ulaşılabilir oluyorlar ancak onu da engelleyecek bir yolumuz var. Sizlere onu da göstereceğim.
<input type="text" name="kullanici_adi" value="admin" >
<style type="text/css">
input[name=kullanici_adi] {
pointer-events: none;
}
</style>
Yukarıdaki CSS komutumuz bir input’u name özelliğini kullanarak pasif hale getirecektir. Ancak tab order sayesinde yani TAB tuşu ile hala ulaşılabilir.
<style>
.link{
pointer-events: none;
}
</style>
<a class="link" href="https://mustafabukulmez.com/" target="_blank" > Mustafa BÜKÜLMEZ!</a>
Yukarıdaki CSS komutu ile de bir bağlantıya tıklanmasını engelleyebilirsiniz.
TAB ORDER Engelleme
input tabinex özelliğini -1 yaparak TAB Tuşu ile gezilmesini engelleyebilirsiniz.
<input type="text" name="kullanici_adi" value="admin" tabindex="-1">
<style type="text/css">
input[name=kullanici_adi] {
pointer-events: none;
}
</style>
Aynı şekilde linkler veya herhangi bir elementi tabindex özelliğini -1 verecek tab order sırasından çıkartabilir ve TAB tuşu ile gezinilmesini engelleyebilirsiniz.
<style>
.link{
pointer-events: none;
}
</style>
<a class="link" href="https://mustafabukulmez.com/" target="_blank" tabindex="-1"> Mustafa BÜKÜLMEZ!</a>
CSS İle Ögeleri Pasif Yapmak – DISABLED Anahtar Kelimesi
İnputlarda Disabled anahtar kelimesini de kullanabilirsiniz. Buradaki fark disabled anahtar kelimesi inputların görsel olarak da pasif olduklarını gösterir. Farkı aşağıdaki görselde görebilirsiniz.
<style>
input[name=kullanici_adi] {
pointer-events: none;
}
.link{
pointer-events: none;
}
</style>
<input name="kullanici_adi" type="textbox" id="signi" value="Mustafa" style="width:100px;" />
<br><br>
<input name="kullanici_soyadi" type="textbox" id="signi" value="BÜKÜLMEZ" disabled style="width:100px;" />
<br><br>
<a class="link" href="https://mustafabukulmez.com/" target="_blank" tabindex="-1"> Mustafa BÜKÜLMEZ!</a>
Bu yazıda kullandığım tüm örnek kodları yukarıdadır.
Kodları biraz daha makyajladım ve biraz daha güzel hale getirdim. Kodlar aşağıdaki gibi oldu. Sizde kodları bir metin belgesine yapıştırıp, uzantısını html olarak değiştirip çalıştırabilir yada sağ tık birlikte aç ile favori browser’ınızda nasıl göründüklerini görebilirsiniz.
Aşağıdaki kodlarda pasif inputlar için html cursor değiştirme işlemi de görebilirsiniz. Gayet hoş oldu.
<style>
input[name=kullanici_adi] {
cursor: not-allowed !important;
pointer-events: none;
}
input[name=kullanici_soyadi]:disabled {
opacity: 0.5 !important; /* Saydamnlık Efekti*/
cursor: not-allowed; /* Pasif durumu için cursor değiştirme*/
}
.link{
pointer-events: none;
}
.disabled-effect{
color:#AAA;
background:#F5F5F5;
}
</style>
<input name="kullanici_adi" type="textbox" id="signi" value="Mustafa" style="width:100px;" />
<br><br>
<input name="kullanici_soyadi" type="textbox" id="signi" value="BÜKÜLMEZ" disabled style="width:100px;" />
<br><br>
<a class="link" href="https://mustafabukulmez.com/" target="_blank" tabindex="-1"> Mustafa BÜKÜLMEZ!</a>
<br><br>
<a class="link disabled-effect" href="https://mustafabukulmez.com/" target="_blank" tabindex="-1"> Mustafa BÜKÜLMEZ!</a>
Bu yazımda bu kadardı. Diğer yazılarda görüşmek üzere.
HTML, CSS hakkındaki diğer yazılarım için tıklayabilirsiniz. Linktree üzerinden bağlantılarıma ulaşabilirsiniz. İşte Burada. Derslerime özel olarak hazırladığım Github Projeme buradan ulaşabilirsiniz… C# Eğitim Seti eğitimi sayfasına gitmek için tıklayınız.
Discord’a katılmayı unutmayın.
Sağlıcakla ve kodla kalın….
Beğendim!
Harika!
İlginç!
Beğenmedim
çok teşekkür ederim beni büyük bir dertten kurtardınız.
Rica ederim. Faydalı olmasına sevindim