Home Button moves to the right on hover
Reply: 0

Button moves to the right on hover

user2438
1#
user2438 Published in June 21, 2018, 8:43 am

I am using the WordPress File Upload Plugin and is working fine, but on hover the button to select a file to upload, the button moves to the right. I think the following CSS is the important part.

input[type="button"].file_input_button{
    width:100px;
    height:27px;
    position:absolute;
    top:0;
    margin:0;
    padding:0;
    background-color:#EEE;
    color:#555;
    background-image:url(white-grad-active.png);
    background-position:left top;
    background-repeat:repeat-x;
    border-style:solid;
    border-width:1px;
    border-color:#BBB;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -khtml-border-radius:2px;
    border-radius:2px
}
input[type="button"].file_input_button_hover{
    width:100px;
    height:27px;
    position:absolute;
    top:0;
    margin:0;
    padding:0;
    background-color:#EEE;
    color:#111;
    background-image:url(white-grad-active.png);
    background-position:left top;
    background-repeat:repeat-x;
    border-style:solid;
    border-width:1px;
    border-color:#333;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -khtml-border-radius:2px;
    border-radius:2px
}
input[type="button"].file_input_button:disabled,input[type="button"].file_input_button_hover:disabled{
    width:100px;
    height:27px;
    position:absolute;
    top:0;
    margin:0;
    padding:0;
    background-color:#EEE;
    color:silver;
    background-image:url(white-grad-active.png);
    background-position:left top;
    background-repeat:repeat-x;
    border-style:solid;
    border-width:1px;
    border-color:#BBB;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -khtml-border-radius:2px;
    border-radius:2px
}

What is the CSS code that is causing this? How can I remove this behavior? Can I disable the .file_input_button_hover CSS?

This CSS it came with the plugin and I can't get rid from it.

UPDATE:

Playing with Chrome's Developer Tools I saw that on hover the class of the button changed from file_input_button to file_input_button_hover and position changed from nothing to "position: absolute;"

I don't know why but adding the following to the custom CSS solved the issue:

input[type="button"].file_input_button_hover{
position: relative !important;
}

input[type="button"].file_input_button_hover{
position: relative !important;
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.313259 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO