Toolroom Tech Blog

Devlopers Digest

In-Browser issues with form element heights

How to apply the same height to form elements in web pages.

Ever tried to apply the same height to a textbox and a select? It's crazy!

The problem is (maybe god knows why) the different boxing model. Try this ... and it should work:

input, select, textarea {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

Browser compatibility: Opera, Mozilla and Webkit and IE >8

Dreiecke mit CSS

Dieses versteckte CSS-Feature erfreut sich immer größerer Beliebtheit: Dreiecke zeichnen. Und das Beste daran ist, dass man lediglich die Border property dazu braucht.

Beginnen wir mal mit den Basics, einem quadratischen Container mit einem dicken, fetten, bunten Rahmen.

<div class="bordered"></div> 
.bordered{
 height: 10px;
 width: 10px;
 background-color:lightgreen;
 border-color: red yellow green blue;
 border-style: solid;
 border-width: 10px 10px 10px 10px;
}

Man kann schon sehr gut erkennen, dass der Browser den Stoß der aneinandertreffenden Kanten abschrägt. Als nächstes setzen wir die Maße des Containers auf 0.

 

.arrow-all{
 height: 0px;
 width: 0px;
 border-color: red yellow green blue;
 border-style: solid;
 border-width: 10px 10px 10px 10px;
}

Wie zu erwarten war, sehen wir nun nur noch den Rahmen, der wiederum nur aus Dreiecken besteht. Nun machen wir 3 davon noch transparent und fertig ist der Pfeil.

 

.arrow{ height: 0px; width: 0px;}
.arrow-n
{
 border-color: transparent transparent green transparent;
 border-style: solid;
 border-width: 0px 10px 10px 10px;
}

Und den Pfeil nun in die rechte untere Ecke zeigen zu lassen, nehmen wir diesen Nord-Pfeil und halbieren ihn, indem wir einfach den rechten Rand auf 0 setzen.

.arrow{ height: 0px; width: 0px;}
.arrow-se{
 border-color: transparent transparent green transparent;
 border-style: solid;
 border-width: 0px 0px 14.14px 14.14px;
}

Und damit kann man sich jetzt beliebig spielen.

Viel Spaß!