1

如何在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;
}

该按钮在模糊边框内显示，如下所示：在此处输入图像描述

请帮我。

4

6 回答 6

3

我认为您正在寻找大纲属性：

a {
    outline:0;
}
于 2013-04-18T06:44:24.740 回答
3

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

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

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

至于阴影，请将此属性添加data-shadow="false"到<a>标签中。

于 2013-04-18T08:13:48.997 回答
1

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

<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>`
于 2013-04-18T06:44:07.837 回答
0

你能检查按钮的背景图像吗？它可能包含内部边框

于 2013-04-18T06:42:05.850 回答
0

IMO拥有后退按钮的最佳方法是这样做

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

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

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

于 2014-04-24T09:58:31.727 回答
0

这个解决方案对我来说很好

border: none !important;
box-shadow: none !important;
outline: 0;
于 2014-10-07T12:48:10.003 回答