html - 设置带有半边框的文本区域

Question

我怎样才能做一个 textarea 有一个半边框，看起来就像下图中的那个？而这一切都只有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;
}

Answer 2

尝试这个

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

如果你想实现半边框，直接 CSS 边框属性是不可能的

可能这可以帮助你css border-left 50% height

Answer 3

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

Answer 4

在父 div 中创建一个spanor并创建它并添加边框divposition: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
}

演示