Problem overriding bootstrap.min.css with customized submit button style

[Lio]

Hello there,

I'm trying to use a customized submit button for login. The problem is in normal status the button image is the correct one but width is controlled by bootstrap.min.css; in hover status the width is correct but image is overridden by bootstrap.min.css.... Driving me crazy...

Code in view:

  {{form.custom.submit['_class']='btn_auth'}}
  {{=form.custom.submit}}

Code in customized css file:

.btn_auth {
 background:url('../images/button_02.png') no-repeat;
 border: 0px;
 width:205px;
 height:45px;
 position: relative;
 top:80px;
 left:97px;
}
.btn_auth:hover{
    background:url('../images/button_hover_02.png');
    border: 0px;
 width:205px;
 height:45px;
 position: relative;
 top:80px;
 left:97px;
}


.btn_auth:active{
    background:url('../images/button_active.png') no-repeat;
    border: 0px;
 width:201px;
 height:41px;
 position: relative;
 top:80px;
 left:97px;
}

Can someone please advise? Thanks in advance.

Lio

[Paolo Caruccio]

please try:

input.btn_auth {


 background:url('../images/button_02.png') no-repeat;
 border: 0px;
 width:205px;
 height:45px;
 position: relative;
 top:80px;
 left:97px; 
}


input.btn_auth:hover { 
 background:url('../images/button_hover_02.png') 
}


input.btn_auth:active {


 background:url('../images/button_active.png') no-repeat;

 width:201px;
 height:41px;
}

[冷春辉]

It works nicely now. Thank you Paolo.

--
 
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/3XQzzZwZ8vk/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.