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

如何删除jquery mobile中按钮的默认边框？我宣布<a>标签作为一个按钮，自定义背景图片如下：如何删除jquery mobile中按钮的默认边框？

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

模糊边界内的按钮显示如下： enter image description here

请帮我。

来源

2013-04-18 Nguyen Minh Binh

'的.ui-BTN {边境工作的罚款：无重要; }' – Omar 2013-04-18 07:29:57

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

<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-18 06:44:07

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

来源

2013-04-18 06:42:05

背景图像没问题。没有外部边界。我转而使用按钮元素，它工作。 – 2013-04-18 06:44:39

你可以尝试“outline：none”为“”。 – 2013-04-18 06:46:11

我认为你正在寻找的 outline property：

a { 
    outline:0; 
}

来源

2013-04-18 06:44:24 soyuka

这帮助我从div＃索引中删除它，我使用了下面的css＃index.ui-page.ui-page-active {outline-color：transparent; } – 2013-11-21 09:56:09

若要覆盖在jQuery Mobile的按钮默认样式，做.ui-btn类，然后!important每个属性的修改。

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

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

至于阴影，这个属性data-shadow="false"添加到<a>标签。有后退按钮

来源

2013-04-18 08:13:48 Omar

IMO最好的办法就是做这个

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

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

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

来源

2014-04-24 09:58:31 MurWade

该解决方案对我来说

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

来源

2014-10-07 12:48:10 alexunger

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

回答

相关问题