CODEWITHSUNDEEP
htmlcssjquery-mobile
Nguyen Minh Binh
Nguyen Minh Binh

Reputation: 24453

How to remove default border of button in jquery mobile?

How to remove default border of button in jquery mobile? I declare the <a> tag as a button, with custom background images as 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 a .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 like this: enter image description here

Please help me.

Upvotes: 1

Views: 16515

Answers (6)

Alex.U
Alex.U

Reputation: 1701

This solution worked fine for me

border: none !important;
box-shadow: none !important;
outline: 0;

Upvotes: 0

Mustafa
Mustafa

Reputation: 1776

IMO best way to have back buttons is to do this

  $(document).on("mobileinit", function () {

        $.mobile.toolbar.prototype.options.addBackBtn = true;
        $.fn.buttonMarkup.defaults.corners = false;
    });

However, $.fn.buttonMarkup.defaults.corners = false; doesnt remove round corners for back buttons that are automatically generated using the global options.

Upvotes: 0

Omar
Omar

Reputation: 31732

To override default styles for buttons in jQuery Mobile, do your modifications on class .ui-btn followed by !important for each property.

Demo: http://fiddle.jshell.net/Palestinian/8TH5d/

.ui-btn { border: none !important; }

As for the shadow, add this attribute data-shadow="false" to <a> tag.

Upvotes: 3

soyuka
soyuka

Reputation: 9105

I think that you're looking for the outline property :

a {
    outline:0;
}

Upvotes: 3

Nguyen Minh Binh
Nguyen Minh Binh

Reputation: 24453

Changing to use button element, everything works fine.

<button id="btnLogin" href="../main/mainx.html" data-role="none" data-corner="false"> Login</button>
<button id="btnSignUp" href="../singup/signup.html" data-role="none" data-corner="false"> Sign Up</button>`

Upvotes: 1

Nguyễn Văn Vương
Nguyễn Văn Vương

Reputation: 66

Can you check the background image of button? it maybe contain border inside

Upvotes: 0

Related Questions