html - 用半边框设计文本区域

Question

我怎样才能使文本区域具有半边框并且看起来就像下图中的那样？所有这一切都只用了 css。

在我的 html 中看起来像:

    <div class"textareaKeeper">
    <textarea class="forDesc">Small Description</textarea>
</div>

Answer 1

尝试向上移动文本区域并调整边距和填充。

参见 DEMO (已修复浏览器不一致问题)。

textarea {
    width: 198px;
    height: 20px;
    line-height: 20px;
    top: -12px;
    border: none;
    resize: none;
    margin-left: 2px;
    position: relative;
    padding: 0 2px;
}
div {
    border-left: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    height: 10px;
    width: 204px;
    margin-top: 20px;
}