I am supposed to add submit action to an image.So on the main page,i have done <input type="submit" class="go-button" name="submit"/> in
and in css i have written
.go-button {
margin-right:7px;
background: transparent url(../images/go.gif);
width:26px;
height:20px;
border:0px;
overflow:hidden;
}
But the problem is I am getting Submit query on the GO image.
I dont want that.
Plz help me.
A submit button can also be defined as an image:
<input type="image" src="image.png" alt="Alt text" />
Related
i'm simply trying to set a background image to my submit button in my form. I've tried a couple variations of methods but every time I get the default browser button. Anyone know where I'm going wrong here?
HTML
<div id="headerSearch">
<form method="post" action="Test.php">
<div id="headerSearchBar">
<input class="tbSearch" type="text" name="search" size="12" placeholder="Search...">
</div>
<div id="headerSearchBtn">
<input class="btnSearch" id="button" name="submit" type="submit" value="">
</div>
</form>
</div>
CSS
#headerSearch{
float:right;
width:80%;
height:80px;
}
#headerSearchBar{
float:left;
width:90%;
height:80px;
}
.tbSearch{
height:25px;
width:95%;
margin-top:27.5px;
margin-left:2%;
margin-right:0;
margin-bottom:0
}
#headerSearchBtn{
float:right;
width:10%;
height:80px;
text-align:center;
}
.btnSearch{
background-image:url(../IMAGES/btnSearch.svg) no-repeat;
width:25px;
height:25px;
margin-top:27.5px;
}
You need to use just background
background:url(../IMAGES/btnSearch.svg) no-repeat;
I've found a method that fixes the issue, as Michael St Clair has mentioned I needed to use just background in the css rather than background-image. This removed the default browser image and didn't display my selected image.
I used a different method that has now fixed the issue, I tried this method before but with the background-image tag rather than with just background as Michael St Clair suggested, which all and all has now fixed the issue.
HTML
<input class="btnSearch" id="btnSearch" name="btnSearch" type="submit" value="">
CSS
.btnSearch{
width:25px;
height:25px;
margin-top:27.5px;
}
input#btnSearch{
background:url(../IMAGES/btnSearch.svg) no-repeat;
}
Add background-size:100% 100% to your button css. Something like this: http://codepen.io/shreya1289/pen/QEKGWa
I've got a file submit form and I want to change how the buttons look. Previously, I've done it this way, by wrapping the form inputs into divs and then using CSS to make the divs look a certain way.
However, It doesn't seem to work for the file submit button #myFile. It just places the button inside of the div. Whereas the submit button looks how I want it to look. Anyway to fix this? I would like the Choose File button to look like the submit button. Just text, no gray oval.
<form id="dataform" action="submit" method="post" enctype="multipart/form-data">
<div id="btn_upload_data">
<input type="file" name="myfile" id="myFile"/>
</div>
<div id="btn_sub_data">
<input type="submit" id="data_submit" value="Submit File"/>
</div>
</form>
Some CSS:
div#btn_upload_data input {
cursor:pointer;
padding-top:40px;
padding-bottom:60px;
width:130px;
height:0px;
background-color:#a6e79b;
border: none;
text-align:center;
display:inline-block;
float:left;
white-space: pre-wrap;
}
Try using
#btn_upload_data input[type="file"] {
opacity: 0;
filter: aplha(opacity=0);
}
And then place a text inside the div as Choose File.
<div id="btn_upload_data" title="No File Chosen"> // if title needed
<input type="file" name="myfile" id="myFile"/>
Choose File...
</div>
There is no alternate way of editing it. It is a pre-defined input type file's style. That is set by the OS itself. So you cannot edit that! You need to override it completely.
so I have a submit button with this code:
<form method="post">
<input name="submit" type="submit" class="icon" value=" "/>
</form>
an in the CSS I have:
.icon{
background-color:transparent;
background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
height:20px;
width: 20px;
background-position:center;
border:none;
cursor:pointer;
background-size: 100%;
}
But the problem is that the image ( that have h:40px and w:40px) does not shrink to fit the 20px button... Do you guys have any solution for this??
(I rather not use javascript if possible)
EDIT:
Currently working. I just delete history, cash and it works... ty
try this : -
background-size:20px 20px;
Use an image submit button instead, and shrink the element to the desired dimensions using CSS.
<input name="submit" type="image" class="icon"
style="width: 20px; height: 20px"
src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png"
alt="Send" />
add this line in css file:
display:block;
You need to wrap a span to submit button and style it.
DEMO http://jsfiddle.net/H5dmd/2/
HTML
<form method="post">
<span class="icon">
<input name="submit" type="submit" value=" "/>
</span>
</form>
CSS
input[type=submit]{
background:transparent;
width:20px;
height:20px;
border:none;
padding:none;
cursor:pointer;
}
.icon{
float:left;
background-color:transparent;
background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
height:20px;
width: 20px;
background-position:center;
border:none;
cursor:pointer;
background-size: 100%;
}
Add an id to the button, Updating the image:
document.body.onclick=function(e){
debugger;
var bid=document.getElementById('bid');
bid.style.backgroundImage="url('http://www.google.co.il/images/srpr/logo4w.png')";;
}
js fiddle here.
You can simply use input of type image, it exists for this purpose exactly: submit button showing an image. As a bonus you'll also get the coordinates where the user clicked.
Example:
<input name="mysubmit" type="image" src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" />
Live test case.
Only one downside: in the server side code handling the form, you'll have to check if "mysubmit.x" and/or "mysubmit.y" are not empty to know if you got anything sent which is less intuitive than just checking "mysubmit".
I see multiple options here :
Change saving
Save your image to 20x20, and whoops, problem gone.
Use CSS3
CSS3 introduces a new feature that is backgroud-size
Just put that in your CSS :
background-size: 20px 20px;
But it won't be compatible with old browsers.
Use JavaScript [Bad style]
HTML
<form method="POST" action="test.php" name="myform">
<a onclick="javascript:document.forms['myform'].submit ();" ><img src="myimage.png" onclick="submit();" /></a>
</form>
So, I was messing with CSS for my buttons and tried to test the following CSS code on the button element:
button {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
The 2 buttons at the end are created by this HTML:
<div id="header">
<div id="logo"><img src="logo.jpg" /></div>
<div id="search">
<form id="search-form">
<input type="text" style="width:80%;height:28px;background-color:#F5F5F5;font-size:16px;position:relative;top:-3px;"/>
<button type="button" style="position:relative;top:6px;"><img src="mgt.jpg" /></button>
</form>
</div>
<div id="upload" class="top-button"><button>Upload</button></div>
<div id="signin" class="top-button"><button>Sign in</button></div>
</div>
Last 2 buttons "upload" and "signin" are the ones n question.
and the result:
As viewed in Firefox. Any ideas what is causing this?
I don't see the issue .... Check out http://jsfiddle.net/vb7S3/
But I would still recommend not to use <button> tags and rather define style classes for #upload and #signin.
HTML
<button id="upload" class="top-button">Upload</button>
<button id="signin" class="top-button">Sign in</button>
CSS
#upload, #signin {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
Also <button> is tag may not be supported by all browsers.
Better Way...
HTML
<input id="button" class="upload-button" type="submit" value="Upload" />
<input id="button" class="sign-in-button" type="submit" value="Sign In" />
CSS
#button {
width:85px;
height:29px;
background-color:#800080;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
Must include <input> tag inside the <form> ... </form> block.
see this demo on jsfiddle
you issue is id='upload' or id="signin"in
<div id="upload" class="top-button"><button>Upload</button></div>
there is some conflect between the CSS for upload and signin ids, possibly , some hieght value issue
It could be the height property that's causing this, since the purple area appears to be 29 px high. I'm not sure what the extra border below the text is, but it's possible that the border is being applied around the text instead of the entire button. Try adding border:none and see if that helps.
I have a submit button and am styling it using the following css:
.subm
{
background-color:Transparent;
background-image:url(Images/Button_Send.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;}
.subm:hover
{
background-color:Transparent;
background-image:url(Images/Button_Send_Over.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;
}
Here is the html:
<input type="submit" class="subm" value="" />
Nothing surprising. However, what annoys me is that when the submit button is clicked in IE it moves the image up a couple of pixels cutting them off which makes it look, hmm, good word, 'naff.' How can I compensate or stop this?
I have tried expanding the image and leaving a couple of blank pixels at the top but it still does the same thing!
Thanks R.
I had an issue with my buttons moving around when they were clicked in IE after I styled them too. The solution I found was:
1.) Give your button(s) an equal margin
2.) Place the button(s) in a wrapper division that you can position to your liking
.subm {
background-color:Transparent;
background-image:url(Images/Button_Send.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;
margin:10px; //maybe more maybe less
}
<div style="position:...;float:...;">
<input type="submit" class="subm" name="myButton" id="myButton" />
</div>
Although I have to mention that in my particular case I'm styling my buttons by ID and not applying a class so you might have issues with multiple buttons using the .subm class. THIS WORKED FOR ME IN IE THOUGH.
Try replacing the input with the button tag.
<button type="submit"><img src="..." alt="..." /></button>
and see if this doesn't accomplish it. You would need to adjust your hover effects though which might prove to require either just putting text inside the button and using a negative text-indent, or a javascript hover event to change the referenced image.
Another option is using javascript to call the form submit on a normal link, as buttons typically have a click animation.
Just a note, you could probably get more consistent results by adding a background position, and all of this you can shorthand as well
.subm:hover
{
background: transparent url("Images/Button_Send_Over.png") top center no-repeat;
}
Yet another maybe more ideal option, use the input type image instead of submit.
<input type="image" src="..." Value="Submit" />
I am pretty sure this describes the bug and has some solutions for you:
Fixing the IE8 Form Button with Background Image On Click CSS Bug