Question

我希望将.ui-input-text类应用于输入字段。但是没有得到应用。我正在使用jquery移动类进行文本输入。除非我使用CSS内联，否则边框半径不会改变。这是我的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Login</title>

    <style type="text/css">
        @font-face {
            font-family: 'RNS Camelia';
            font-style: normal;
            font-weight: normal;
            src: local('RNS Camelia'), url(http://localhost/codeigniter/fonts/RNS_Camelia.otf);
        }

        .ui-btn {
            width: 40% !important;
            height: 15px !important;
            border-radius: 50px !important;
            text-align: center !important;
            background-color: #D6DE23 !important;
            font-family: 'RNS Camelia', serif !important;
        }

        .login_button {
            margin-left: 20px !important;
            text-align: center !important;
        }

        .ui-page {
            background-image: url('../codeigniter/images/background.jpg') !important;
            width: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

         .ui-input-text {
            border-radius: 50px !important;
        }

        .user_pass {
            text-align: center!important;
            color: white!important;
            font-family: 'RNS Camelia', serif!important;
            font-size: 16px!important;
            height: 20px!important;
        }

        .text_input_wrap {
            margin-right: 15px !important;
        }

        .bottom_links {
            color: white!important;
            font-family: 'RNS Camelia', serif!important;
            text-decoration: none !important;
        }
    </style>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div class="ui-content" data-role="main">
            <img border="0" src="<?php echo $this->config->base_url();?>   images/logo_only.png" alt="Logo Bar Express" style="margin:0px;width:313px;display:inline;height:142px;float:left;" />
            <div style="clear:both;"></div>



            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <div class="user_pass">Username</div>
                </div>
                <div class="ui-block-b">
                    <div class="user_pass">Password</div>
                </div>
            </div>

            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <div class="text_input_wrap">
                        <input type="text" id="username" name="username">
                    </div>
                </div>
                <div class="ui-block-b"> </div>

            </div>


            <input type="password" id="password" name="password">

            <div class="ui-grid-solo">
                <div class="ui-block-a">
                    <div class="login_button">
                        <input type="submit" value="LOGIN">
                    </div>
                </div>
            </div>



        </div>
    </div>

</body>

</html>

Answer 1

将<style>阻止从body部分移至Head。为什么因为jquery mobile使用ajax，所以它不会从Head加载任何内容。

了解更多here

Answer 2

这里在你自己的样式表底部做了一些代码。

<强> FIDDLE Demo

.ui-input-text{
    border-radius: 50px;
}

jquery mobile CSS类不适用于输入字段

2 个答案: