Как удалить границу по умолчанию кнопки в 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

Изменение стиля кнопки, все работает нормально.

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

Можете ли вы проверить фоновое изображение кнопки? он может содержать границу внутри

Answer 3

Я думаю, что вы ищете outline property:

a { 
    outline:0; 
} 

Answer 4

Чтобы переопределить стили по умолчанию для кнопок в JQuery Mobile, сделать ваши изменения в классе .ui-btn с последующим !important для каждого свойства.

Демо: http://fiddle.jshell.net/Palestinian/8TH5d/

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

Что касается тени, добавьте этот атрибут data-shadow="false" к <a> тега.

Answer 5

ИМО лучший способ иметь обратные кнопки, чтобы сделать это

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

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

Однако $ .fn.buttonMarkup.defaults.corners = ложь; не удаляет круглые углы для кнопок назад, которые автоматически генерируются с использованием глобальных параметров.

Answer 6

Это решение работало нормально для меня

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