Does anyone know how to update the text size inside the input field? So far, this is what I have. If I update the input font-size, it also updates the button's size, which I don't want to do.
I also want to add the labels inside the input field but haven't had much luck. If anyone has succeeded doing so, please let me know.
<NLForm>
<style>
h1 {color: #464646;
font-size: 20;
}
form {
width:100%;
position:relative;
}
input {
width: 400px;
height: 40px;
font-size: 12px;
}
textarea {
width: 530px;
height:120px;
}
.btn {
background-color: #d42027;
color:ffffff;
}
</style>
<HTML>
<Head>
<title> </title>
</Head>
<Body>
<table width="50%">
<tbody>
<tr>
<td width="50%">
<table>
<tbody>
<tr>
<td><h1>Name:</h1></td>
</tr>
<tr>
<td><nlfirstname></nlfirstname></td><td><nllastname></nllastname></td>
</tr>
<tr>
<td><h1>Email:</h1></td>
</tr>
<tr>
<td><nlemail></nlemail></td>
</tr>
<tr>
<td><nlcompanyname></nlcompanyname></td>
</tr>
</tbody>
</table>
</td>
<td width="50%">
<table>
<tbody>
<tr>
<td><h1>Comments:</h1></td>
</tr>
<tr>
<td><nlcomments></nlcomments><nlsubsidiary></nlsubsidiary></td>
</tr>
</tbody>
</table>
</td>
<td>
<table width="70%">
<tbody>
<tr>
<td><input type="Submit" value="Send" class="btn"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</Body>
</HTML>
</NLForm>
If you want to target only a specific type of input in your CSS you can use an attribute selector:
/* This will target all the input controls */
input {
width: 400px;
height: 40px;
}
/* This will target only the text boxes */
input[type="text"] {
font-size: 15px;
}
/* This will target only the submit box */
input[type="submit"] {
background-color: #d42027;
color: #ffffff;
font-size: 12px;
}