jquery - text area in html jumps on focus

Question

i have a html tag for text area as below...

<div>
    <span class="l" style="padding-top: 77px">
        <textarea id="txt7" rows="3" cols="50">Lorem ipsum</textarea>
    </span>
</div>

on focus i am changing border color and border width it worked fine. the problem when i do focus on that element text area box jumps on the page (means moves a little bit....)

css:

textarea:focus { .br; border-style: solid; .shdw; }

so any work around to this plz.............

how abt using box-shawdow property .....i am not aware of using it ........so do any help there on this............

Answer 1

这是因为当没有边界并且不预期边界会发生变化（自然）时，不考虑边界厚度。

尝试在 CSS 中为元素未聚焦时设置固定边框大小，并使其透明（或有效透明（即匹配背景颜色）），然后在焦点上为边框更改的所有内容就是颜色.

Answer 2

把它扔到你的CSS中，它会留在它应该在的地方。- 希望这可以帮助。

#txt7{
    position:absolute;
}

Answer 3

检查这个。

我不觉得有什么问题。一个原因可能是 css 与定义的另一个 css 冲突

<div> or <span> or <textarea>

尝试找出是否有任何冲突的 css。