SORU
22 Aralık 2013, Pazar


Bir button alışılmadık şekli?

Genellikle textareas dörtgen ya da kare, Bu gibi:

Usual textarea

Ama özel şekilli bir button, örneğin böyle istiyorum:

Custom-shaped textarea

Bu nasıl mümkün olabilir?

CEVAP
22 Aralık 2013, Pazar


Giriş

İlk olarak, pek çok çözüm, başka görevlerde önerdi. Bu bir anda (2013) herhangi bir CSS3 özellikleri ihtiyacı yok, çünkü tarayıcılar en büyük sayı ile uyumlu olabilir, hangi biri olduğunu düşünüyorum. Ancak, yöntem 11* contentdeditable*dikkatli ol üzerinde çalışmaz.

Bir div contenteditable ile çözüm

@Getz tarafından önerilen contenteditable ile bir div kullanmak ve biraz da div ile şekil. İşte bir örnek, sol üst ve ana div sağ üst tarafında yüzen iki blok ile

The result with Firefox 28

Gördüğünüz gibi, varsınırları olan küçük bir oyunyazınızı istediğiniz gibi aynı sonucu istiyorsanız. Ana div her tarafta mavi bir kenarlığı vardır. Sonraki, kırmızı blokları ana div üst sınırları gizle yapışmasını ve özellikle taraf sadece onlara kenarlık uygulamak için gerekenalt ve solsağ blok içinalt ve sağsol).

O zaman bundan sonra, Javascript ile içerik alabilirsiniz, " dediGönder" düğmesini örneğin tetiklenir. Ve ayrıca CSS (font-size, color, vb.) gerisini halledersin sanırım :)

Tam kod örneği

.block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
}

.parent {
  height: 300px;
  width: 500px;
}
<div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Blunty

    Blunty

    13 Mart 2006
  • colacas

    colacas

    29 EKİM 2006
  • MrSuicideSheep

    MrSuicideShe

    9 NİSAN 2010