Doğrulama Metin Alanı aracını özelleştirme CS.4

Emre Demir

13 sene önce

Özellik denetçisi Doğrulama Metin Alanı aracında basit düzenlemeler yapmanızı sağlasa da özelleştirilmiş stil uygulama görevlerini desteklemez. Doğrulama Metin Alanı aracına ilişkin CSS’yi, sizin beğeninize göre stil uygulanmış bir araç oluşturacak şekilde değiştirebilirsiniz.

Aşağıdaki konularda bulunan tüm CSS kuralları SpryValidationTextField.css dosyasında yer alan varsayılan kuralları belirtir. Dreamweaver, bir Spry Doğrulama Metin Alanı küçük aracı oluşturduğunuzda SpryValidationTextField.css dosyasını sitenizin SpryAssets klasörüne kaydeder. Araca uygulanan çeşitli stiller hakkında açıklamalı bilgiler içerdiğinden bu dosyaya başvurmak yardımcı olabilir.

Doğrulama Metin Alanı aracına ilişkin kuralları doğrudan beraberindeki CSS dosyasında düzenleyebilseniz de, bu aracın CSS’sini düzenlemek için CSS Stilleri panelini de kullanabilirsiniz. CSS Stilleri paneli, özellikle panelin Geçerli modunu kullanıyorsanız aracın farklı parçalarına atanmış CSS sınıflarının bulunmasında yardımcı olur.

Doğrulama Metin Alanı aracı hata mesajı metnine stil uygulama

Doğrulama Metin Alanı aracının hata mesajları varsayılan olarak, metni çevreleyen 1 piksellik bir kenarlıkla kırmızı renkte görünür.

Doğrulama Metin Alanı aracı hata mesajlarının metin stilini değiştirmek için ilgili CSS kuralını bulmak üzere aşağıdaki tabloyu kullanın ve sonra varsayılan özellikleri değiştirin ya da kendi metin stili özelliklerinizi ve değerlerinizi ekleyin:

Değiştirilecek metin	İlgili CSS Kuralı	Değiştirilecek ilgili özellikler
Hata mesajı metni	.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg	color: #CC3333; border: 1px solid #CC3333;

Doğrulama Metin Alanı aracı arka plan renklerini değiştirme

Doğrulama Metin Alanı aracının çeşitli durumlardaki arka plan renklerini değiştirmek için, ilgili CSS kuralını bulmak üzere aşağıdaki tabloyu kullanın ve sonra varsayılan arka plan rengi değerlerini değiştirin:

Değiştirilecek renk	İlgili CSS Kuralı	Değiştirilecek ilgili özellik
Aaracın geçerli durumundaki arka plan rengi	.textfieldValidState input, input.textfieldValidState	background-color: #B8F5B1;
Aracın geçersiz durumundaki arka plan rengi	input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input	background-color: #FF9F9F;
Araç odaktayken arka plan rengi	.textfieldFocusState input, input.textfieldFocusState	background-color: #FFFFCC;

Yazar: Emre Demir

Emre Demir sitemizde 17 yazı eklemiş...