Question

我正在使用jquery mobile制作应用程序。在我的登录屏幕中，我有一个提交按钮。在这个按钮上我想应用这个CSS类。

input.submit {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 8px 20px;
    background: -moz-linear-gradient(
        top,
        #007ca5 0%,
        #8080f5);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#007ca5),
        to(#8080f5));
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #ffffff;
    -moz-box-shadow:
        0px 1px 6px rgba(0,0,0,0.9),
        inset 0px 0px 5px rgba(161,142,016,0.6);
    -webkit-box-shadow:
        0px 1px 6px rgba(0,0,0,0.9),
        inset 0px 0px 5px rgba(161,142,016,0.6);
    text-shadow:
        0px -1px 3px rgba(255,255,255,0),
        0px 1px 0px rgba(255,255,255,0);
}

在我的HTML中使用这个类

<INPUT name=submit value=Inloggen type=submit class="submit">

现在我认为问题在于我的CSS不够具体。因为当我要用Firebug查看我的代码时，我得到了这个div

<div class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-g" data-theme="g" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Inloggen</span>
</span>
<input class="submit ui-btn-hidden" type="submit" value="Inloggen" name="submit" aria-disabled="false">
</div>

所以任何人都可以帮助我，我不太善于使我的CSS更具体。

Answer 1

检查是否在jquery mobile css文件ex：

之后嵌入了自定义样式表

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="Style/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Script/jquery.mobile-1.0.1.js" type="text/javascript"></script>
    <style type="text/css">
        input.submit
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #ffffff;
            padding: 8px 20px;
            background: -moz-linear-gradient(
        top,
        #007ca5 0%,
        #8080f5);
            background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#007ca5),
        to(#8080f5));
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border: 1px solid #ffffff;
            -moz-box-shadow: 0px 1px 6px rgba(0,0,0,0.9), inset 0px 0px 5px rgba(161,142,016,0.6);
            -webkit-box-shadow: 0px 1px 6px rgba(0,0,0,0.9), inset 0px 0px 5px rgba(161,142,016,0.6);
            text-shadow: 0px -1px 3px rgba(255,255,255,0), 0px 1px 0px rgba(255,255,255,0);
        }
    </style>
    <script type="text/javascript">



    </script>
</head>
<body>
    <form>
    <div data-role="page">
        <div data-role="content">
            <input name="submit" value="Inloggen" type="submit" class="submit">
        </div>
    </div>
    </form>
</body>
</html>

输入按钮不会使用正确的CSS类

1 个答案: