Text input overflow

by kmouse

HTML

<input class="" value="sample text" />

<input class="shadow" value="sample text" />
<input class="shadow" value="sample text overflow overflow overflow" />
<input class="shadow border-radius" value="sample text" />
<input class="shadow border-radius" value="sample text overflow overflow overflow" />

<textarea rows="2">sample text</textarea>
<textarea class="shadow"  rows="2">sample text</textarea>
<textarea class="shadow border-radius"  rows="2">sample text</textarea>

<textarea rows="2">sample text
sample text
sample text</textarea>

<textarea class="shadow" rows="2">sample text
sample text
sample text</textarea>

<textarea class="shadow" rows="2" wrap="off">sample text overflow overflow overflow overflow
sample text
sample text</textarea>

CSS

body {
  background: #ddd;
  color: #444;
  text-align: center;
}

input,
textarea {
  display: block;
  margin: 15px auto;
	border: 2px solid #999;
  padding: 10px 15px;
  width: 150px;
}

.shadow {
  text-shadow: -30px -10px #f00;
}

.border-radius {
  border-radius: 15px;
}