하단의 오버레이 상자와 겹치는 텍스트 영역 콘텐츠를 피하십시오.

Question

textarea 하단에 오버레이 상자를 추가하려고합니다. 오버레이 상자의 배치는 쉬웠으나 이제는 textarea 콘텐츠가 오버레이 상자와 겹치지 않도록하고 싶습니다.

내 첫 번째 접근 방식은 padding-bottom을 추가하여 오버레이 상자가있는 textarea의 하단에 텍스트가 도달하지 않도록했습니다. 그러나, 입력 할 때 텍스트 아래에 입력합니다. 또한 위로 스크롤하면 원하지 않는 동작이 발생합니다.

편집 :

내 문제를 부분적으로 해결하는 일부 답변에 대한 응답으로. 나는 텍스트 영역을 가능한 한 네이티브로 보이려고 노력하고 있으므로, 초점을 맞추는 경계선 색도 또한 필요할 것이다.

.container { 
 
    position: relative; 
 
    width: 110px; 
 
} 
 

 
textarea { 
 
    width: 100%; 
 
    height: 50px; 
 
    resize: none; 
 
} 
 

 
texarea.with-padding { 
 
    padding-bottom: 1em; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    bottom: 5px; 
 
    width: 100%; 
 
    height: 1em; 
 
    background: rgba(255,0,0,0.5); 
 
}

<div class="container"> 
 
    <textarea name="" id="">I want this to never go under the red box.</textarea> 
 
    <span></span> 
 
</div> 
 

 
<div class="container"> 
 
    <textarea class="with-padding" name="" id="">I tried with padding-bottom, but it doesn't work either.</textarea> 
 
    <span></span> 
 
</div>

Answer 1

내가 마지막으로 Saurav Rastogi의 및 eyetea의 응답이 수수께끼 감사에 대한 해결책을 발견 다음은 작업 예입니다. 두 가지 모두 거의 완벽했으나 textarea의 경계가 강조 표시되지 않았습니다. 나는 outline을 사용하여이 동작을 유지할 수있었습니다.

둘 다 다른 경계 강조 표시가 가능하므로 두 방법 모두 유용하다고 생각합니다. 하나는 외부에 오버레이를두고, div 래퍼 전략을 사용하고 매우 두꺼운 border-bottom을 사용하여 내부에 남기는 방법입니다.

/* Inner border on focus solution */ 
 

 
.textarea-wrapper { 
 
    border: 1px solid gray; 
 
    display: inline-block; 
 
} 
 

 
.textarea-wrapper textarea { 
 
    display: block; 
 
    border: none; 
 
} 
 

 
.textarea-wrapper textarea:focus { 
 
    outline: 1px solid green; 
 
    outline-offset: 0; 
 
} 
 

 
.textarea-wrapper .overlay { 
 
    width: 100%; 
 
    height: 20px; 
 
    background: rgba(255, 0, 0, 0.5); 
 
} 
 

 
/* Outer border on focus solution */ 
 

 
textarea.bottom-padded { 
 
    border-bottom: 21px solid rgba(255,0,0,0.5); 
 
    outline: 1px solid gray; 
 
    outline-offset: -1px; 
 
} 
 

 
textarea.bottom-padded:focus { 
 
    outline-color: green !important; 
 
}

<div class="textarea-wrapper"> 
 
    <textarea rows="3">Inner border on focus</textarea> 
 
    <div class="overlay"></div> 
 
</div> 
 

 
<textarea rows="3" class="bottom-padded">Outer border on focus</textarea>

Answer 2

당신은 가짜 테두리 (당신의 텍스트 영역 및 오버레이를 보유)를 <div> 컨테이너를 사용하고 textarea의 테두리를 제거 할 수 있습니다. 그냥 아래의 코드에서와 같이이 도움이

$('textarea').on('focus', function() { 
 
    $('.textarea-holder').css('border-color', 'rgba(255, 0, 0, 0.5)'); 
 
}); 
 

 
$('textarea').on('blur', function() { 
 
    $('.textarea-holder').css('border-color', '#333'); 
 
});

.textarea-holder { 
 
    border: 1px solid #333; 
 
    display: inline-block; 
 
} 
 

 
.textarea-holder textarea { 
 
    display: block; 
 
    resize: none; 
 
    border: none; 
 
} 
 

 
textarea:focus { 
 
    outline: none; 
 
} 
 

 
.textarea-holder .overlay { 
 
    width: 100%; 
 
    height: 20px; 
 
    background: rgba(255, 0, 0, 0.5); 
 
} 
 

 
body { 
 
    padding: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="textarea-holder"> 
 
    <textarea rows="6"></textarea> 
 
    <div class="overlay"></div> 
 
</div>

희망!

Answer 3

그래서 내가 나서서을 기록한 :

1. 가 border을 제거하고 다시 몇 가지 스타일 textarea

2. 추가 가짜 국경의 container하고 span의 위치를 ​​제거 block 요소로 만들었습니다. 아래

참조 코드 :

.container { 
 
    position: relative; 
 
    width: 110px; 
 
    border: 1px solid; 
 
} 
 

 
textarea { 
 
    width: 100%; 
 
    height: 50px; 
 
    resize: none; 
 
    border:none; 
 
    outline:none; 
 
    padding: 0; 
 
} 
 

 
.container span { 
 
    display:block; 
 
    width: 100%; 
 
    height: 1em; 
 
    background: rgba(255, 0, 0, 0.5); 
 
}

<div class="container"> 
 
    <textarea name="" id="">I want this to never go under the red box.</textarea> 
 
    <span></span> 
 
</div>

Answer 4

당신은 단순히 span 요소를 모방하는 bottom-border: 1emtextarea에 추가 할 수 있습니다. http://codepen.io/anon/pen/woKyvy#anon-login

.container { 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
textarea { 
 
    width: 100%; 
 
    height: 50px; 
 
    border-bottom: 1em solid rgba(255,0,0,0.5); 
 
}

<div class="container"> 
 
    <textarea>Try typing. The cursor will never end up under the red line.</textarea> 
 
</div>