-1

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をより具体的にするのは得意ではありません.

4

1 に答える 1

2

jquery mobiel css ファイルの例の後にカスタム スタイル シートを埋め込んだことを確認します。

<!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>
于 2012-04-23T07:50:14.397 に答える