Fatal编程技术网
  • jquery/
  • 使用指定的类更改Jquery Mobile中的按钮大小

使用指定的类更改Jquery Mobile中的按钮大小

jquery css html jquery-mobile

使用指定的类更改Jquery Mobile中的按钮大小,jquery,css,html,jquery-mobile,Jquery,Css,Html,Jquery Mobile,我正在使用Jquery Mobile设计一款移动应用程序， 我希望我能得到这样的结果 但我得到的是： 我不想在css中使用.ui btn，我已经定义了自定义btn。 下面是代码 <!DOCTYPE html> <html> <head> <style type="text/css"> .ui-page { background : transparent url("loginPage.jpg") 0 0 no-repeat

我正在使用Jquery Mobile设计一款移动应用程序， 我希望我能得到这样的结果

但我得到的是：

我不想在css中使用.ui btn，我已经定义了自定义btn。 下面是代码

<!DOCTYPE html> 
<html>
<head>
<style type="text/css">
    .ui-page {
    background : transparent url("loginPage.jpg") 0 0 no-repeat      fixed!important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }
    .ui-input-text {
    width: 350px !important;
    height: 50px !important;
    font-size: 150% !important;
    margin-left: 700px !important;
    }

    .custom-btn {
    width: 305px !important;
    height: 30px !important;
    background-color:red !important;
    color:white !important;
    border: red !important;
    font-size: 150% !important;
    margin-left: 700px !important;
    }

</style>   

<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="jq_mobile/jquery.mobile-1.4.5.min.css">

<!-- Include the jQuery library -->
<script src="jq_mobile/jquery-1.11.3.min.js"></script>

<!-- Include the jQuery Mobile library -->
<script src="jq_mobile/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
    <div data-role="page" data-theme="a">
    <div data-role="header">
           <a href="#" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext">Home Icon</a>
    </div>
        <div data-role="main" class="ui-content" id="background">
            <div class="ui-field-contain">
                <input type="text" name="login_id" id="txtLogin" placeholder="Login Id" width="30px">
                <input type="password" name="pin" id="txtPin" placeholder="Pin" width="30"> 
                <input type="button" class="custom-btn" id="btnLogin" value="LOGIN">
            </div>
        </div>
    </div>
</body>
有人知道怎么做吗？提前感谢。

如果要对按钮应用其他颜色，必须覆盖.ui btn类中的默认属性。为了安全起见，您可以在按钮上方添加一个父div，并使用此按钮引用父div，这样它就不会对全局产生影响

  <div class="test">
        <input type="button" class="custom-btn" id="btnLogin" value="LOGIN" />
  </div>

 .test .ui-btn{background-color:red !important; width:220px !important; color:#fff !important;}
 .test .ui-btn:hover{background-color:#ededed !important; color:#000 !important;}
你看起来像这样吗？不。我不想要长按钮全屏宽度，我想要指定宽度的按钮，登录按钮应该是红色的？对不起，因为你的答案是在评论中，我不能投你的票。我会把它贴在回复中