如何在jquery mobile中删除按钮的默认边框？

Question

如何在jquery mobile中删除按钮的默认边框？ 我将<a>标记声明为按钮，自定义背景图片如下：

<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;
}

按钮在模糊边框内显示如下：

请帮帮我。

Answer 1

我认为您正在寻找outline property：

a {
    outline:0;
}

Answer 2

要覆盖jQuery Mobile中按钮的默认样式，请对类.ui-btn进行修改，然后对每个属性执行!important。

演示：http://fiddle.jshell.net/Palestinian/8TH5d/

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

对于影子，请将此属性data-shadow="false"添加到<a>代码。

Answer 3

更改为使用按钮元素，一切正常。

<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>`

Answer 4

您可以查看按钮的背景图片吗？它可能包含内部边框

Answer 5

IMO使用后退按钮的最佳方法是执行此操作

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

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

然而，$ .fn.buttonMarkup.defaults.corners = false;不会删除使用全局选项自动生成的后退按钮的圆角。

Answer 6

此解决方案对我来说很好

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