Bir HTML düğmesinin / gönderiminin tüm stilini kaldırın

Internet Explorer'da bir düğmenin stilini tamamen kaldırmanın bir yolu var mı? Düğmem için bir css sprite kullanıyorum ve her şey yolunda görünüyor.

Ama düğmeye tıkladığımda biraz yukarı çıkıyor, şeklini bozuyor. Bir css tıklama durumu veya fare indirme durumu var mı? Bu durumu neyin tetiklediğini bilmiyorum.

Bunun gerçekten önemli bir şey olmadığını biliyorum, ama bazen önemli olan küçük şeylerdir.

' Düğmeyi tıklayın, biraz yukarı çıkıyor' dediğinizde, düğme için fare aşağı tıklama durumundan bahsettiğinizi ve fare tıklamasını bıraktığınızda normal durumuna döndüğünü varsayıyorum. ? Ve şunu kullanarak düğmenin varsayılan oluşturmasını devre dışı bıraktığınıza:

input, button, submit { border:none; } 

Öyleyse..

Şahsen, bu IE yerel eylemini gerçekten durduramayacağınızı / geçersiz kılamayacağınızı / devre dışı bırakamayacağınızı anladım, bu da beni bu harekete izin vermek için işaretlememi biraz değiştirmeme ve çeşitli durumlar için düğmenin genel görünümünü etkilememe yol açtı.

Bu benim son notum:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

Bunun daha kapsamlı bir yaklaşım sağladığını düşünüyorum:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

<button>Example</button>

Sorunuz "Internet Explorer" diyor, ancak diğer tarayıcılarla ilgilenenler için, artık all: unsetstillerini çözmek için düğmelerden yararlanabilirsiniz.

IE veya Edge 18'de çalışmıyor, ancak başka her yerde iyi destekleniyor.

https://caniuse.com/#feat=css-all

Safari renk uyarısı: Kullandıktan colorsonra düğme metninin ayarlanması, WebKit'teki bir hataall: unset nedeniyle Safari 13.1'de başarısız olabilir . (Hata Safari 14 ve sonraki sürümlerde düzeltilecektir.) " Siyaha ayarlanıyor ve bu rengi geçersiz kılıyor." Kullandıktan sonra metni ayarlamanız gerekirse , hem ve hem de aynı renge ayarladığınızdan emin olun .all: unset-webkit-text-fill-colorcolorall: unsetcolor-webkit-text-fill-color

Erişilebilirlik uyarısı: Fare imleci kullanmayan kullanıcılar için, klavye erişilebilirliği gibi bazı :focusstilleri yeniden eklediğinizden emin olun .button:focus { outline: orange auto 5px }

Ve unutma cursor: pointer. düğmenin üzerine geldiğinizde fare imlecinizin işaret eden bir el gibi görünmesini sağlayan , dahil tüm stilleri all: unsetkaldırır . Neredeyse kesinlikle onu geri getirmek istiyorsun.cursor: pointer

button {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}

<button>check it out</button>

Düğmenizden kenarlığı kaldırmayı deneyin:

input, button, submit
{
  border:none;
}

Bootstrap 4'te en kolayı. Sınıfları kullanabilirsiniz: bg-transparentveborder-0

Sanırım düğme "aktif" durum.

Düğmenize basit bir stil ekleyin

.btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}