2

テキストエリアを半分の境界線にし、下の画像のようにするにはどうすればよいですか？そしてこれはすべてcssでのみです。

ここに画像の説明を入力してください

私のHTMLでは次のようになります：

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

4 に答える 4

4

テキストエリアを上にシフトし、マージンとパディングを調整してみてください。

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;
}
于 2013-03-25T06:24:35.903 に答える
1 
textarea {
 border-top: 0;
 height: 18px; /* optional but looks like you have a short text area */
}
于 2013-03-25T06:14:04.107 に答える
1

これを試して

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

ハーフボーダーを実現したい場合は、直接CSSボーダープロパティでは不可能です。

これはあなたがcssボーダーを助けることができるかもしれません-左50％の高さ

于 2013-03-25T06:16:45.267 に答える
1

親div内にspanまたはを作成して作成し、境界線を追加します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
}

デモ

于 2013-03-25T06:22:02.240 に答える