设计带有半边框的textarea

Question

我怎么能让textarea有一个半边框，看起来就像下图中的那个？所有这些只有css。

在我的html中看起来像：

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

Answer 1

尝试向上移动textarea并调整边距和填充。

请参阅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;
}

Answer 2

textarea {
 border-top: 0;
 height: 18px; /* optional but looks like you have a short text area */
}

Answer 3

试试这个

.forDesc{
    border-style:solid;
    border-color:white red red red;
}

如果要实现半边框，则无法使用直接CSS边框属性

可能会对您有所帮助css border-left 50% height

Answer 4

在父div中创建span或div并将其设为position:absolute并添加边框

HTML

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

<强> CSS

textarea{
    border:none; 
    height:30px;
    background:#fcf7d1;
    bottom:0;
    vertical-align:bottom;
    width:100%
}
span{
    width:100%;
    position:absolute;
    bottom:0; display:inline-block;
     border-bottom:solid 1px red;
    border-left:solid 1px red;
    border-right:solid 1px red;
    height:15px
}
.textareaKeeper{
    border:none;   
    display:inline-block;
    position:relative
}

<强> DEMO