Html textarea无法点击，无法在其中键入文本

Question

我的HTML中有以下文本框

我有以下代码：

＆＃13;

＆＃13;

.contact-us-form textarea, .contact-us-form input[type="text"], .contact-us-form input[type="email"] {
    height: 40px;
    padding: 0;
    margin: 0;
    line-height: 0;
    padding-left: 15px;
    color: #333;
    width: 100%;
    border: none;
    border-bottom: 1px #BFB9B9 solid;
    padding-left: 40px;
}

.contact-us-form textarea {
    height: 100px;
    padding-top: 20px;
}

＆＃13;

<textarea name="" placeholder="Message *"></textarea>

＆＃13;

＆＃13;

＆＃13;

由于某种原因，我无法将光标放在textarea中，我也无法在其中键入文本。为什么会这样？我没有附加到这个文本框的任何JS，我已经调试并测试了这个，我也检查了所有计算的css属性，我似乎没有找到导致这个问题的确切原因。

有人能指出我到底做错了什么吗？

My site link

Answer 1

请尝试此代码。 如果您设置了line-height: 0;，或者您为此属性设置了任何px，那么它将由line-height:initial;样式引起，那么它将正常工作。

而不是：

.contact-us-form textarea, .contact-us-form input[type="text"], .contact-us-form input[type="email"] {
    line-height: 0;        
}

应该：

.contact-us-form textarea, .contact-us-form input[type="text"], .contact-us-form input[type="email"] {
    line-height: initial;        
}

希望这有帮助。

Answer 2

确定。我在这里测试并发现了问题..在焦点textarea获得行高：0px。

请参见随附的屏幕截图链接here

请知道如何解决这个问题：）

Answer 3

编辑CSS，这样您就可以输入消息框了。

.contact-us-form textarea {
    height: 100px;
    padding-top: 20px;
    font: inherit;
    color: inherit;
}

Answer 4

尝试删除

line-height

或尝试

line-height: initial;

这

.contact-us-form textarea, .contact-us-form input[type="text"], .contact-us-form input[type="email"]

Answer 5

将position:relative用作您的输入元素及其包裹的其他任何元素