How do i increase the height of the message box only not rest of the boxes?-CodePudding

I want the the input box of class message to be of 50px of height but it is not increasing even though i have added padding to it (refer the last part of css code) . All are coming of the same length. Please help me with this one .Any help would be appreciated.

HTML code

<section >
    <h3>
        Contact Us
    </h3>
    <div >
        <input type="text"  id="name" placeholder="Enter Your name" />
        <input type="text"  id="name" placeholder="Enter Your phone" />
        <input type="email"  id="name" placeholder="Enter Your email" />
        <input type="text"  id="message" placeholder="Enter Your message" />
    </div>
</section>

CSS code

* {
    box-sizing: border-box;
}
.contact {
    background-color: rgb(233, 230, 227);
    height: 100%;
}
.contact h3 {
    text-align: center;
}
.form {
    text-align: center;
    max-width: 344px;
    width: 100%;
    position: relative;
    left: 50%;
    transform: translatex(-50%);
}
.form input {
    width: 100%;
    padding: 7px;
    border: 1px solid grey;
    border-radius: 5px;
    margin: 15px 0px;
}
.form message {
    padding: 50px;
}

CodePudding user response：

You forgot to add a . to this .form message.

* {
    box-sizing: border-box;
}
.contact {
    background-color: rgb(233, 230, 227);
    height: 100%;
}
.contact h3 {
    text-align: center;
}
.form {
    text-align: center;
    max-width: 344px;
    width: 100%;
    position: relative;
    left: 50%;
    transform: translatex(-50%);
}
.form input {
    width: 100%;
    padding: 7px;
    border: 1px solid grey;
    border-radius: 5px;
    margin: 15px 0px;
}
.form .message {
    padding: 50px;
}

<section >
    <h3>
        Contact Us
    </h3>
    <div >
        <input type="text"  id="name" placeholder="Enter Your name" />
        <input type="text"  id="name" placeholder="Enter Your phone" />
        <input type="email"  id="name" placeholder="Enter Your email" />
        <input type="text"  id="message" placeholder="Enter Your message" />
    </div>
</section>

CodePudding user response：

please check complete code :

* {
  box-sizing: border-box;
}
.contact {
  background-color: rgb(233, 230, 227);
  height: 100%;
}
.contact h3 {
  text-align: center;
}
.form {
  text-align: center;
  max-width: 344px;
  width: 100%;    
  position: relative;
  left: 50%;
  transform: translatex(-50%);
}
.form input {
  width: 100%;
  padding: 7px;
  border: 1px solid grey;
  border-radius: 5px;
  margin: 15px 0px;
}
.form textarea {
resize:none;
width:100%;
border-radius: 5px;
 padding: 7px;
}

<section >
        <h3>
            Contact Us
        </h3>
        <div >
            <input type="text"  id="name" placeholder="Enter Your name">
            <input type="text"  id="name" placeholder="Enter Your phone">
            <input type="email"  id="name" placeholder="Enter Your email">
            <textarea rows="4" placeholder="Enter Your message"></textarea>
        </div>
    </section>

CodePudding user response：

Also, you can use textarea tag like this

<textarea rows="4" cols="50">Enter your message here </textarea>