As far as I know, the 'image' input type can only be used for a 'submit' button.
How do I make 'reset', 'print' and 'upload file' buttons on my form contain an certain image in them instead of being generic gray HTML buttons?
I gathered that I would need JavaScript for that, but is there any other (simpler) way to achieve it?
Thank you!
style the buttons
you can do anything in css
input.print {background:src(bla bla bla)}<input class='print'>has the appropriate image, you dont really need the image you can style the button itself, images take size, extra http calls, time
style the buttons
you can do anything in cssinput.print {background:src(bla bla bla)}<input class='print'>has the appropriate image, you dont really need the image you can style the button itself, images take size, extra http calls, time
So simple and great!
Never occurred to me.
Thank you!
style the buttons
you can do anything in cssinput.print {background:src(bla bla bla)}<input class='print'>has the appropriate image, you dont really need the image you can style the button itself, images take size, extra http calls, time
Actually, I tried and it didn't work correctly:
http://eximi.net/Hawaii/html/contact_email.php
Here is my CSS:
input.print {
background-image: url(../assets/images/print_btt.png);
width: 119px;
height: 47px;
}
input.upload {
background-image: url(../assets/images/uf_btt.png);
width: 119px;
height: 47px;
}
input.reset {
background-image: url(../assets/images/reset_btt.png);
width: 119px;
height: 47px;
}Here is my HTML:
<tr>
<td>
<!--<input type="submit" name="submit" value="Submit" />-->
<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" />
<input class="upload" type="file" name="uploadedfile" value="Upload file" />
<input class="reset" type="reset" value="Reset" />
<input class="print" type="button" onclick="window.print()" value="Print"> <br />
</td>
</tr>
Set the following property in your classes-
border: none;
padding: 0px;
text-indent: -9999px;Also, try setting the width and height properties on just the 'inputs' without the classes to make them fit.
sorry papanyquit, this happens often, no personal attack intended padding:0; zero has no dimension, dimensions may throw compliant browsers off and render in quirks mode
1px <> 1em <> 1%
0px = 0em = 0% == 0
I havent looked at prior solutions, this post may not be relevant to the thread
also have this attribute into <input type="button"
value=""
so as to remove the black text overlapping the button
sorry papanyquit, this happens often, no personal attack intended
padding:0;zero has no dimension, dimensions may throw compliant browsers off and render in quirks mode
1px <> 1em <> 1%
0px = 0em = 0% == 0I havent looked at prior solutions, this post may not be relevant to the thread
I didn't know that :o Thanks for the explanation!
also have this attribute into <input type="button"
value=""
so as to remove the black text overlapping the button
Thank you!
But you know what - the overlapping black text disappeared even without this.
I just added this:
border: none;
padding: 0;
text-indent: -9999px;and it fixed the problem.
But... now my 'file' button disappeared altogether:
http://eximi.dreamhosters.com/Hawaii/html/contact_email.php
Here is the HTML:
<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" />
<input type="file" name="uploadedfile" class="upload" />
<input type="reset" class="reset" />
<input type="button" class="print" onclick="window.print()" />Set the following property in your classes-
border: none; padding: 0px; text-indent: -9999px;Also, try setting the width and height properties on just the 'inputs' without the classes to make them fit.
Thank you so much!
This fixed it. Except for the small problem - now my 'file' input control disappeared altogether. :)
This is what the form looks like now:
http://eximi.dreamhosters.com/Hawaii/html/contact_email.php
This is what I need it to look like:
http://www.polycysticliverdisease.com/html/contact_us.html
Here is the HTML:
<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" />
<input type="file" name="uploadedfile" class="upload" />
<input type="reset" class="reset" />
<input type="button" class="print" onclick="window.print()" />Here is the CSS:
.print {
background: transparent;
background-image: url(../assets/images/print_btt.png);
border: none;
padding: 0;
text-indent: -9999px;
}
.upload {
background: transparent;
background-image: url(../assets/images/uf_btt.png);
border: none;
padding: 0;
text-indent: -9999px;
}
.reset {
background: transparent;
background-image: url(../assets/images/reset_btt.png);
border: none;
padding: 0;
text-indent: -9999px;
}
input[type=button]
{
width: 119px;
height: 47px;
}
input[type=reset]
{
width: 119px;
height: 47px;
}
input[type=file]
{
width: 119px;
height: 47px;
}<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" />should be changed to
<input type="image" src = "../assets/images/submit_btt.png" name="submit" id = "button" />Hopefully this will work
<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" />should be changed to
<input type="image" src = "../assets/images/submit_btt.png" name="submit" id = "button" />Hopefully this will work
Yes, you are right! Thank you!
I overlooked it and was just wondering why the button wasn't working when your note came.
But actually I tried your code and it still didn't work, so for now I just replaced the 'image' input control with the 'submit', and it works:
<input type="submit" name="submit" class="submit" />http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_input_src
Yes, thank you!
I knew that. But the problem is that 'image' input type only replaces a 'submit' button.
And I needed graphics for 'button', 'reset' and 'file' input types.
I got working first two, but 'file' input type proves to be the most difficult.
File is NOT a button + text box. The whole darned thing is one control. For a way to change the appearance, check out some ajax file uploaders:
http://valums.com/wp-content/uploads/ajax-upload/demo-prototype.htm
Set the following property in your classes-
border: none; padding: 0px; text-indent: -9999px;Also, try setting the width and height properties on just the 'inputs' without the classes to make them fit.
Okay, here is the deal.
The buttons look differently in different browsers.
In Firefox you can see three of them and not 'file' input control.
In Internet Explorer none is seen.
In Chrome and Safari they all are seen, but the 'file' control is overlapped with the black text and the buttons are not lined up.
In Opera they all are seen and lined up, but the 'file' control is overlapped with the black text.
To make a long story short it's a mess. :)
File is NOT a button + text box. The whole darned thing is one control. For a way to change the appearance, check out some ajax file uploaders:
http://valums.com/wp-content/uploads/ajax-upload/demo-prototype.htm
Thank you very much!
Looking into it.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.