溢出-y在textarea中不起作用

问题描述：

我的表单中有overflow-y属性的问题。当我将此属性添加到我的SCSS没有任何更改。我还添加了height和max-height属性，我仍然无法获得正确的结果。溢出-y在textarea中不起作用

这里是我的代码：

<form> 
    <input type="text" name="name" placeholder="What is your name?"> 
    <input type="text" name="mail" placeholder="Type your e-mail"> 
    <input type="textarea" name="message" placeholder="Leave your message here"> 
</form>

SCSS

form { 
    input[type="text"], 
    input[type="textarea"] { 
    border: none; 
    border-bottom: 3px solid black; 
    margin-bottom: 5vh; 
    padding: 10px; 
    box-sizing: border-box; 
    &:focus { 
     background-color: yellow; 
    } 
    } 
    input[type="text"] { 
    width: 100%; 
    height: 5vh; 
    } 
    input[type="textarea"] { 
    width: 100%; 
    height: 20vh; 
    max-height: 20vh; 
    overflow-y: scroll; 
    } 
}

https://jsfiddle.net/vmzmz1ru/

jsfiddle在Chrome上正常工作 –

为什么不使用标记.. 无效，我想。 –

它在Firefox中不起作用，我正试图修复它... – mati

答

请更正

<input type="textarea">

不是有效的标签。如果你想有一个textarea你需要创建标签是这样的：

<textarea> </textarea>

和CSS选择器还需要编写这样的选择：

textarea{ 
/* CSS code here */ 
}

并添加这些款式 white-space：nowrap; overflow-x：auto; –

答

使用<textarea></textarea>标签.. <input type="textarea" />无效

这里是更新工作小提琴： https://jsfiddle.net/doddw147/

溢出-y在textarea中不起作用

相关推荐