Hi all,

 

I am working on adding a contact form consisting of 3 single-line and 1 multi-line text fields to a website.

 

How can I remove the inner shadow that appears on the single-line text fields but not on the multi-line one (I see this in my Chrome browser). I hope that this will also fix the problem where the multi-line text field appears slightly shorter than the others, even though they all have been given the same width (400px).

 

 

Here's the site.

 

CSS:

@charset "utf-8";
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.cssform p{
width: 300px;
clear: left;
padding: 0px 0px 0px 155px;
}
.form {
width: 418px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #fff;
vertical-align: top;
margin-left: 50px;
}
.inforequired {
width: 360px;
float: left;
}
.pointer {
cursor: pointer;
}
.asterisk {
float: right;
}
.field {
width: 418px;
font-size: 20px;
color: #FFF;
vertical-align: text-top;
overflow: visible;
margin-bottom: 5px;
padding-bottom: 5px;
}
.cssform label{
float: left;
margin: 0px 5px 0px 0px; /*width of left column*/
width: 145px; /*width of labels. Should be smaller than left column (145px) to create some right margin*/
font-size: 14px;
color: #FFF;
}
.cssform input[type="text"]{
width: 400px; /*width of text boxes. IE6 does not understand this attribute*/
}
.cssform textarea{
width: 400px;
}
/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/
* html .threepxfix{
margin-left: 3px;
}

 

Form;

<div class="form">
 <form name="myform" class="cssform" action="contactsend.php" method="post">
   <div class="field">
  <label id="Name">Full Name:</label>
  <br />
  <input name="Name" type="text" id="name" value="" />
   <div class="asterisk">*</div>
   </div>
   <div class="field">
  <label id="Email">Email Address:</label>
  <br />
  <input name="Email" type="text" id="email" value="" />
   </div>
   <div class="field">
  <label id="Subject">Message Subject:</label>
  <br />
  <input name="Location" type="text" id="location" value="" />
   </div>
   <div class="field">
  <label id="Enquiries">Message:</label>
  <br />
  <textarea name="Enquiries" rows="8" id="enquiries"></textarea>
   <div class="asterisk">*</div>
   </div>
   <div style="margin-bottom: 10px;">
   <div class="inforequired">* Information is required</div>
<div class="pointer"><img onclick="verify()" src="Images/Contact Us/send.png" alt="Send" /></div>
</div>
 </form>
</div>

 

Hope you guys can help!

It's not really a shadow. It's a border style. Try this:

 

input, textarea {
  border:1px solid black;
}

 

You can change the values as you want, of course

Edited October 1, 201213 yr by ocorreiododiogo

Excellent, thanks ocorreiododiogo!

I hope that this will also fix the problem where the multi-line

text field appears slightly shorter than the others, even though they

all have been given the same width (400px).

 

 

It is a different size from the other ones because it is resizeable. You can drag the bottom right corner to change the size. If you want to diable this try

textarea {
resize: none;
}

Edited October 4, 201213 yr by mantis

Demonolith was talking about the different width that was caused by borders having different thickness. You didn't see it because the problem was already fixed