Submit Input Doesn't Get The: Active State in Ie8 When I Click on The Button's Text

submit input doesn't get the :active state in IE8 when I click on the button’s text

you can achieve this by applying input:focus to your input:active selector declaration:

input:active,input:focus{background-color:#000}

applying :active and :focus together are great for ui/ux/etc.... a lot of things.

ie8 input[type=submit] with background image - text not clickable

You can try workaround with :focus

Maybe some like this, I don't have your code but you can try this:

input:active,input:focus
{
   background-image: ...
}

You have similar problem here: submit input doesn't get the :active state in IE8 when I click on the button’s text

IE8 and IE9 - Styling after button has been clicked

It seems that you're disabling the buttons after click ( function disableButtons ). To change the text's grey color (default for disabled) you can use:

.button[disabled], .button:disabled {
    color:#fff;
}​

Then, as Mr. Alien said, you've to find a way to target ie (probably with conditional comments) and switch from text-shadow to filter:

.ie .button {
    text-shadow:none;
    filter:/* etc */
}

a with an inner span not triggering :active state in IE 8

Right, terribly over-complicated solution (and still imperfect), but: if you don’t wrap the link text in the <span>, and instead just use the <span> as a place to put your background image and position it absolutely within the <a>, then the <span> (mostly) stops blocking the :active state.

Test page: http://www.pauldwaite.co.uk/test-pages/2769392/3/

HTML

<a class="button" href="#">
<span></span>Link
</a>

CSS

<style type="text/css">
a.button {
    position: relative;
    padding: 10px;
    color: #c00;
}

a.button:active {
    color: #009;
    font-weight: bold;
}

a.button span {
    position: absolute;
    top: 50%;
    left: 3px;
    margin-top: -2px;
    border: solid 2px #000;
}
</style>

Of course, the area that the <span> covers still traps the click event, so when the user clicks on there, they won’t see the :active state. It is a slight improvement on the previous situation.

Stopping IE from highlighting the first submit-button in a form

On your asp.net button control, set useSubmitBehavior="false". That renders the html as a button rather than a submit.

Submit button doesn't work

If you are not using any JavaScript for form validation then a simple layout for your form would look like this:

<form action="formHandler.php" method="post">    
 <input name="fname" id="fname" type="text" value="example" />    
 <input type="submit" value="submit" />
</form>

You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.

For a more direct answer, provide the code you are working with.

You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html

submit button stays hover color after clicked

i assume you are styling your button on focus in order to get rid of the outline, so simply split the selector into 2 and on focus remove only the outline:

.form input:focus {  background: #FFFFAD;  outline: none;}.buttons {  text-align: left;}.buttons input {  font-size: 2.5em;  font-weight: bold;  font-family: "Arial", serif;  padding: 8px 40px;  background: #4470B6;  border: 0px;  margin-left: 0px;  margin-right: 50px;  margin-top: 50px;  -moz-border-radius: 50px;  -webkit-border-radius: 50px;  border-radius: 50px;  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);  box-shadow: 0 0 4px rgba(0, 0, 0, .75);  color: #FFFAFA;}.buttons input:hover{  background-color: #50627E;  outline: none;  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);  box-shadow: 0 0 1px rgba(0, 0, 0, .75);}.buttons input:focus {  outline: none;}

<!--  Details Form -->
<section class="details">  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">
    <div class="form">      <label>First Name:</label>      <input type="text" name="firstname" placeholder="First Name" autofocus />    </div>
    <div class="buttons">      <input type="submit" value="Search">      <input type="reset" value="Reset">    </div>  </form></section>

Two submit buttons in one form

If you give each one a name, the clicked one will be sent through as any other input.

<input type="submit" name="button_1" value="Click me">

---

Related Topics