CODEWITHSUNDEEP
htmlcssformsinput
Zevoxa
Zevoxa

Reputation: 301

Specify an input type name?

I'm making a contact form. Now obviously I'll want the message box bigger than the Email and Subject input boxes. So obviously I can't just type in my input in css because it'll change all boxes. I thought specifying the message box would go something like this 

input [type="text" name="message"] {
    padding-bottom: 500px;
}

That obviously didn't work... So what am I doing wrong?

HTML

<div id="contactContent">
 <form>
 <label>Email:</label><input type="text" name="email" />
 <br>
 <label>Subject:</label><input type="text" name="subject" />
 <br>
 <label>Message:</label><input type="text" name="message" />
 </form>
</div>

CSS

#contactContent { 
    margin-top: 50px; 
    margin-left: 350px;
}
input { 
    border: none; 
    background-color: #CCCCCC; 
    margin-left: 20px; 
    margin-bottom: 5px; 
    padding-right: 250px;
    padding-top: 13px;
    padding-bottom: 13px;
}
label {
    display:inline-block;
    width:100px;
    font-family:maven;
    color: #FF6464;
    font-size: 20px;
    text-align: right;
}
input [type="text" name="message"] {
    padding-bottom: 500px;
}

Upvotes: 1

Views: 1844

Answers (2)

Matt Cain
Matt Cain

Reputation: 5768

Your selector is incorrect, the correct way to apply a style to the element via both its type and name would be:

input[type="text"][name="message"] {
    padding-bottom: 500px;
}

Although you'd be better off using a class or id to target the element unless you have a good reason for doing it like that.

Upvotes: 5

ralph.m
ralph.m

Reputation: 14345

The better option for a message box is the <textarea> element:

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>

Then styles for that don't compete with the input styles.

Anyhow, if for some reason you do just want a one line input, another styling hook would be a unique class or id.

Upvotes: 2

Related Questions