[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6569
  • Last Modified:

Removing border on input file box

I am wondering how to remove the box around the input file upload like the other ones at this link:

http://www.critterclassifieds.net/index.php?a=ad-signup

Not sure why its doing that.
CSS:

input, select, textarea {
      float:left;
      background-color:#CC0066;
      color:#FFFFFF;
      padding:5px;
      border:0;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
      margin:2px;
}
select {
      padding: 5px 3px;
      margin:2px 3px;
      outline:none;
}
input:hover,select:hover,textarea:hover{
      background-color:#ff99cc;
      color:#202020;
}
input:focus,select:focus,textarea:focus{
      background-color:#ff99cc;      
      color:#202020;
}

Any suggestions?

Ryan
0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 2
1 Solution
 
catonthecouchproductionsAuthor Commented:
I cant seem to get these ones to work is there any other work around?

Thanks so much for your help

Ryan
0
 
catonthecouchproductionsAuthor Commented:
Using that first link you gave me, I have:

http://critterclassifieds.net/?a=ad-signup

CODE:


<h2>Fill out form below to sign up for advertising</h2>
<form action="send-form.php" method="post" enctype="multipart/form-data">
     <label>Name:</label><input type="text" name="name" size="40"><br />
     <label>Company Name:</label><input type="text" name="company" size="40"><br />
     <label>Phone:</label><input type="text" name="phone" size="14" maxlength="12" value="555-555-5555" onFocus="clearText(this)"><br />    
     <label>E-Mail:</label><input type="text" name="email" size="40"><br />  
     <label>Comments:</label><textarea cols="37" rows="5" name="comments" onFocus="clearText(this)">Comments Here.</textarea><br />
     <b>Max width of ad: 263px</b>
     <div class="fileinputs">
           <div class="fakefile">
                 <input />
            <img src="search.gif" />
           </div>
           <label>Ad Image:</label><input type="file" name="pic" class="file" /><br />
     </div>
 
     <input type="submit" value="Submit" name="submit">
     <input type="reset" value="Reset" name="reset">
</form>

CSS:

input, select, textarea {
      float:left;
      background-color:#CC0066;
      color:#FFFFFF;
      padding:5px;
      border:0;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
      margin:2px;
}
input.file {
      position: relative;
      text-align: right;
      -moz-opacity:0 ;
      filter:alpha(opacity: 0);
      opacity: 0;
      z-index: 2;
}
div.fileinputs {
      position: relative;
}

div.fakefile {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
}
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now