html5 - How to remove default border of button in jquery mobile? -
how remove default border of button in jquery mobile? declare <a>
tag button, custom background images below:
<a id="btnlogin" href="../main/mainx.html" data-role="button" data-corner="false"> login</a> <a id="btnsignup" href="../singup/signup.html" data-role="button" data-corner="false"> sign up</a>
css:
a{ width: 265px; height: 38px; margin-left: auto; margin-right: auto; margin-top: 5px; border: 0px; border-color: transparent; display: box; text-transform: none; text-shadow: none; } #loginpage .ui-btn-inner{ padding-top: 11px; } #loginpage #btnlogin{ background: transparent url(../../res/img/login_btn.png) no-repeat; background-size: 100% 100%; color: #fff; } #loginpage #btnlogin:hover{ background: transparent url(../../res/img/login_btn_over.png) no-repeat; background-size: 100% 100%; } #loginpage #btnsignup{ background: transparent url(../../res/img/signup_btn.png) no-repeat; background-size: 100% 100%; color: grey; } #loginpage #btnsignup:hover{ background: transparent url(../../res/img/signup_btn_over.png) no-repeat; background-size: 100% 100%; color: #fff; }
the button shows within blur border this:
please me.
to override default styles buttons in jquery mobile, modifications on class .ui-btn
followed !important
each property.
demo: http://fiddle.jshell.net/palestinian/8th5d/
.ui-btn { border: none !important; }
as shadow, add attribute data-shadow="false"
<a>
tag.
Comments
Post a Comment