溢出-y在textarea中不起作用

Question

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

这里是我的代码：

<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/

Answer 1

请更正

<input type="textarea"> 

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

<textarea> </textarea> 

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

textarea{ 
/* CSS code here */ 
} 

Answer 2

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

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