0

私はかなりストレスの多い問題を抱えています。次の図のように、inputというdivクラスを適用して、ユーザー名/パスワードフィールドのボックスのスタイルを設定しました。

ここに画像の説明を入力してください

ただし、検索バーに別のスタイルを適用したいのですが、インラインスタイルシートを使用しても、古い入力要素のスタイルが使用されます。私はほとんどすべてを試しました。

ログインhtml

<div class="form">  

<form name="form1" method="POST" action="login.php">
<div class="input">
  <input name="username" id="username" placeholder="Username">

  <input name="password" id="password" placeholder="Password">
  </div>

  <input type="submit" name="Submit" value="Login" class="submit">


</form>
</div>

検索バーのhtml

<div class="ajax-div">

    <div class="searchbar">

     <input type="text" onKeyUp="getScriptPage('box','text_content')" id="text_content">

    </div>

    <div id="box"></div>
</div>

その最後のwidth：入力のパラメーターは、ページ上のすべての入力バーの幅を指定します。

.form {

    margin-top:-182px;
    margin-left:1100px;
    position:static;
    width: 220px;
    height:150px;
    padding: 20px;
    padding-top:10px;
    border: 1px solid #270644;

  background:url(bg-right.png);

}


.label {
        font-size: 12px;
        font-family: arial, sans-serif;
        list-style-type: none;
        color: #999;
        text-shadow: #000 1px 1px;
        margin-bottom: 10px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: block;
    }   




input {
      /* input boxes*/
      -webkit-transition-property: -webkit-box-shadow, background;
      -webkit-transition-duration: 0.25s;
        padding: 6px;
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
        border-top: 1px solid #666;
        -moz-box-shadow: 0px 0px 2px #000;
        -webkit-box-shadow: 0px 0px 2px #000;
        margin-bottom: 10px;
        background: #FFF;
        width: 130px;

    }

検索バーに適用しようとしているCSS：

searchbar {

left: 350px;
top:100px;
width: 300px;

}
4

5 に答える 5

2

CSSセレクターが間違っています。

これの代わりに：

searchbar {

left: 350px;
top:100px;
width: 300px;

}

これを試して：

.searchbar #text_content {

left: 350px;
top:100px;
width: 300px;

}

「ドット」は、クラス名をターゲットにすることを示します。「ハッシュ」は、特定のIDをターゲットにすることを示します。CSSの名前には手がかりがあります。カスケードスタイルシート。スタイルは、一般的なものからより具体的なものへと「トリクルダウン」します。したがって、単一の要素のみをターゲットにする場合は、IDが最適です...通常、要素の一般的なスタイルをオーバーライドします。

幸運を！

于 2012-08-14T11:34:47.583 に答える
1

クラスを入力タグに直接適用するか、このCSSを使用してみましたか？

.searchbar input{
// this CSS will only be applied to searchbar input box
left: 350px;
top:100px;
width: 300px;

}

検索バーに適用しようとしているCSSが間違っています。検索バーはdivのクラスであり、入力ボックスではありません。上記のCSSを使用してみて、機能するかどうかを確認してください

于 2012-08-14T11:33:43.420 に答える
0

したがって、searchbarセレクターは文字で始まり.、入力セレクターをオーバーライドするには、おそらく次のようになります。.searchbar input

そして、のためinputに、あなたはおそらく.input inputセレクターとして欲しいでしょう..？

于 2012-08-14T11:33:38.987 に答える
0

すべての入力フィールドに汎用セレクターを使用しています（CSSの最後のセクション：input {..）。したがって、スタイリングはすべての入力に適用されます。

各入力に独自のクラスを指定して、入力ごとに異なるスタイルを割り当てることができるようにすることをお勧めします。例えば。

CSS

.search
{
    background: red;
}

.login
{
    background: blue;
}

HTML

<input type="text" class="search" />

また、セレクター'searchbar'は、searchbarと呼ばれる要素を対象としているため、何も選択しません。クラスをターゲットにする場合は、を使用してターゲットにする必要があります。例：.searchbar

于 2012-08-14T11:34:38.367 に答える
0

input {}は、すべての入力要素にスタイルを適用しますinput [type="text"]など...

代わりに、.input input {}を適用して、inputクラス内の入力要素にスタイルを適用します

検索バー内の入力要素にスタイルを適用するには、.searchbarinput{}を使用します

于 2012-08-14T11:35:36.163 に答える