How do I make this Form field box taller?

How do I make this Form field box taller (more height)?

<form method="get" action="../search.php">
<p>
<div id="search1">
<input type="hidden" name="type" value="videos" />
<input type="text" size="50" name="keyword" id="keyword" value="Enter Words Here" style="color: #D9D9D9" style="vertical-align:middle"; onfocus="if (this.value=='Enter Words Here') {this.value=''; this.style.color='#696969';}" >
<input type="image" align="top" src="../images/Button1.png" style="outline:" name="sa" value="Search" id="search2" /><br />
</div>
</p>
</form>

Is there any CSS applied to this? You could give it some padding or more elements…what exactly are you trying to achieve?

It’s the right length, but not the right height.
Just want it to be taller. There’s no css on this.

As I said, add some padding to it. If you are trying to achieve a certain look to it, we could help. Show us what you have and what your ideal look is.

Just do something like

form{padding:10px;} or something.

Can you give me an example of where, in the code, I could add height?

Show us YOUR code (full raw HTML) and I’ll throw it in. My code should go in the <head> section of hte webpage, and either in <style> tags, or preferably an external stylesheet via <link>. Do you already have a CSS file? Either embedded or external?

Any example please will be helpful with tags.

<style type="text/css">
form{padding:10px;}
</style>

In the <head> section.

Thanks, but that didn’t add any height to that Form field box

Could you post an example? I never was good at shooting in the dark. If the form children are floated you need to add overflow:hidden to form{} since the height has probably collapsed. Just another shot in the dark.

There should be. That’s how you define how it should look.

That it is the right length in your browser doesn’t mean it will be in other browsers unless you set the width using CSS.

Are you referring to the entire form, or to the input textbox? If it’s the latter, put the padding on the input[type=text] element in the CSS.

Here’s a demo. You could either add an explicit height to the element (height: 30px—but probably not a good idea) or top and bottom padding, as Ryan suggested:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

input[type="text"] {padding: 10px 0; width: 270px; color: #696969; vertical-align:middle}
input[type="image"] {display: inline-block; vertical-align: top;}

</style>
</head>
<body>

<form id="search1" method="get" action="../search.php">
	<input type="hidden" name="type" value="videos">
	<input type="text" name="keyword" id="keyword" placeholder="Enter Words Here">
	<input type="image" src="../images/Button1.png" name="sa" value="Search" id="search2">
</form>

</body>
</html>

If there are no css, you can add style:

<form method="get" action="../search.php">
<p>
<div id="search1" **style="THIS IS THE STYLE"**>
<input type="hidden" name="type" value="videos" />
<input type="text" size="50" name="keyword" id="keyword" value="Enter Words Here" style="color: #D9D9D9" style="vertical-align:middle"; onfocus="if (this.value=='Enter Words Here') {this.value=''; this.style.color='#696969';}" >
<input type="image" align="top" src="../images/Button1.png" style="outline:" name="sa" value="Search" id="search2" /><br />
</div>
</p>
</form>

That IS CSS except jumbled in with the HTML top make it much harder to maintain.

Also CSS embedded in the HTML can’t adapt for different media.

1 Like