填充顶部不能在滚动文本区域

我想保持顶部填充textarea。但是当滚动条出现时，填充顶部不起作用。填充顶部不能在滚动文本区域

这是我的html和css。任何人都可以请帮我吗？谢谢。

<div class="form-group has-feedback issue-detail-text-area marginTop30"> 
     <textarea id="abc" name="abc" class="form-control clearable textArea x form-control-focus" rows="3" maxlength="500"></textarea> 
     <span class="input-lable input-lable-focus">Other issue details (optional)</span> 
</div> 

#abc { 
    padding-top: 22px; 
    padding-bottom: 8px; 
} 
.marginTop30 { 
    margin-top: 30px; 
} 
.input-lable-focus { 
    top: 10px; 
    font-size: 11px; 
    opacity: 1; 
    z-index: 100; 
} 
.input-lable { 
    position: absolute; 
    color: #b8bdc4; 
    left: 18px; 
}

来源

2017-05-31 Vaidehi Hirani

这应该工作。 https://stackoverflow.com/a/28002934/5074858 – xxCodexx

这对我有效。谢谢。 @xxCodexx –

您的代码似乎是工作......之后我删除从外层div的marginTop30类...

见片断

#abc { 
 
    padding-top: 20px; 
 
    padding-bottom: 8px; 
 
} 
 
.input-lable-focus { 
 
    top: 15px; 
 
    font-size: 11px; 
 
    opacity: 1; 
 
    z-index: 100; 
 
} 
 
.input-lable { 
 
    position: absolute; 
 
    color: #b8bdc4; 
 
    left: 18px; 
 
} 
 
/* These styles aren't necessary, but just for show. */ 
 
textarea { 
 
    border: 1px solid grey; 
 
    border-radius: 5px 5px 0 5px; 
 
    width: 500px; 
 
}

<div class="form-group has-feedback issue-detail-text-area"> 
 
    <span class="input-lable input-lable-focus">Other issue details (optional)</span> 
 
    <textarea id="abc" name="abc" class="form-control clearable textArea x form-control-focus" rows="3" maxlength="500"></textarea> 
 
</div>

来源

2017-05-31 10:04:03

这解决了你的问题。唯一需要注意的是你必须设置宽度，textarea只能垂直扩展。

基本上，你会将class'outer'添加到form-group div并假冒它作为整个textarea。 <textarea>本身不会将自身限制为边框填充/边距。

.input-lable-focus { 
 
    font-size: 11px; 
 
    opacity: 1; 
 
    z-index: 100; 
 
} 
 
.input-lable { 
 
    color: #b8bdc4; 
 
} 
 
textarea { 
 
    border: none; 
 
    outline: none; 
 
    width: 495px; 
 
    max-width: 495px; 
 
} 
 
.outer { 
 
    overflow: auto; 
 
    padding: 10px 0 0 10px; 
 
    width: 500px; 
 
    border: 1px solid #aaa; 
 
}

<div class="form-group has-feedback issue-detail-text-area outer"> 
 
    <span class="input-lable input-lable-focus">Other issue details (optional)</span> 
 
    <textarea id="abc" name="abc" class="form-control clearable textArea x form-control-focus" rows="3" maxlength="500"></textarea> 
 
</div>

来源

2017-05-31 15:26:32 nightowl

填充顶部不能在滚动文本区域

回答

相关问题