CODEWITHSUNDEEP
htmlcsssass
mati
mati

Reputation: 97

Overflow-y does not work in textarea

I have issue with overflow-y property in my form. When I added this property to my SCSS nothing changed. I also added height and max-height property and I still cannot get the proper result.

Here is my code:

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

Upvotes: 0

Views: 1004

Answers (2)

Sahil Dhir
Sahil Dhir

Reputation: 4250

use <textarea></textarea> tag .. <input type="textarea" /> is invalid

Here is the updated working fiddle: https://jsfiddle.net/doddw147/

Upvotes: 1

Arpit Kumar
Arpit Kumar

Reputation: 2249

Please correct 

<input type="textarea">

Is not a valid tag. If you want a textarea you need to create the tag like this:

<textarea> </textarea>

and in CSS selector also you need to write the selector like this:

textarea{
 /* CSS code here */
}

Upvotes: 4

Related Questions