Well I am trying to submit a form by pressing enter but not displaying a submit button. I don\'t want to get into JavaScript if possible since I want everything to work on a
For those who have problems with IE and for others too.
{
float: left;
width: 1px;
height: 1px;
background-color: transparent;
border: none;
}
For anyone looking at this answer in future, HTML5 implements a new attribute for form elements, hidden
, which will automatically apply display:none
to your element.
e.g.
<input type="submit" hidden />
Use following code, this fixed my problem in all 3 browsers (FF, IE and Chrome):
<input type="submit" name="update" value=" Apply "
style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
hidefocus="true" tabindex="-1"/>
Add above line as a first line in your code with appropriate value of name and value.
The most elegant way of doing this is to keep the submit-button, but set it's border, padding and font-size to 0.
This will make the button dimensions 0x0.
<input type="submit" style="border:0; padding:0; font-size:0">
You can try this yourself, and by setting an outline to the element you will see a dot, which is the outside border "surrounding" the 0x0 px element.
No need for visibility:hidden, but if it makes you sleep at night, you can throw that in the mix as well.
JS Fiddle
I work with a bunch of UI frameworks. Many of them have a built-in class you can use to visually hide things.
<input type="submit" class="sr-only" tabindex="-1">
<input type="submit" class="cdk-visually-hidden" tabindex="-1">
Brilliant minds who created these frameworks have defined these styles as follows:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.cdk-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
I've used:
<input class="hidden" type="submit" value=""
onclick="document.getElementById('loginform').submit();"/>
and:
.hidden {
border:0;
padding:0;
font-size:0;
width: 0px;
height: 0px;
}
in the .css file. It worked magically for me too. :)