CSS ile giriş ve gönder düğmesi nasıl şekillendirilir?

CSS öğreniyorum. CSS ile giriş ve gönder düğmesi nasıl şekillendirilir?

Böyle bir şey yaratmaya çalışıyorum ama nasıl yapacağımı bilmiyorum

<form action="#" method="post">
    Name <input type="text" placeholder="First name"/>
    <input type="text" placeholder="Last name"/>
    Email <input type="text"/>
    Message <input type="textarea"/>
    <input type="submit" value="Send"/>
</form>

Gönder düğmenizi diğer html öğelerini stilize ettiğiniz gibi stilize etmeniz yeterlidir. CSS öznitelik seçicisini kullanarak farklı türde giriş öğelerini hedefleyebilirsiniz

Örnek olarak şunları yazabilirsiniz

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

Diğer seçicilerle birleştirin

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

İşte çalışan bir [Örnek][1]

Yorumlar (0)

HTML

<input type="submit" name="submit" value="Send" id="submit" />

CSS

#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}
Yorumlar (0)

Form öğesi kullanıcı arayüzü bir şekilde tarayıcı ve işletim sistemi tarafından kontrol edilir, bu nedenle bunları tüm yaygın tarayıcı / işletim sistemi kombinasyonlarında aynı görünecek şekilde çok güvenilir bir şekilde biçimlendirmek önemsiz değildir.

Bunun yerine, belirli bir şey istiyorsanız, size stilize edilebilir form öğeleri sağlayan bir kütüphane kullanmanızı tavsiye ederim. uniform.js böyle bir kütüphanedir.

Yorumlar (2)