4

サイズが 190x30 ピクセルの div と、同じ背景画像があります。背景画像は角丸長方形で見栄えが良いです。テキスト フィールドを div に配置すると、背景が縦方向に繰り返されるため、何らかの理由で検索ボックスに 60 ピクセルの縦方向のスペースが必要になります...なぜですか? DreamWeaver では正しく表示されることを追加する必要がありますが、Chrome または IE では正しく表示されません。

4

5 に答える 5

7

CSS:

.round {
    width: 100%;
    border-radius: 15px;
    border: 1px #000 solid;
    padding: 5px 5px 5px 25px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.corner {
    position: absolute;
    top: 3px;
    left: 5px;
    height: 20px;
    width: 20px;
    z-index: 10;
    border-radius: 10px;
    border: none;
    background: #000; /* Set the bg image here. with "no-repeat" */
}

.search {
    position: relative;
    width: 190px;
    height: 30px;
}

HTML :

<form id="search-form">
    <div class="search">
      <input type="text" name="search" class="round" />
      <input type="submit" class="corner" value="" />
    </div>
</form>

デモ: http://jsfiddle.net/Bh4g3/

于 2012-05-05T15:22:57.953 に答える
2

背景が繰り返されないようにするには、次の CSS 宣言を使用します。

#element {
    background-repeat: no-repeat;
}
于 2012-05-05T15:24:23.117 に答える
0

あなたはこれを行うことができます：

CSS:

.example input[type=text] {
       border-radius: 25px;
      }

HTML:

<div class="example">
         <input type="text" placeholder="Search..">
       </div>

これがどのように見えるかを確認するためのフィドルです：

.example input[type=text] {
  border-radius: 25px splid;
}
<!DOCTYPE html>
<html>

  <head>
  </head>
    <body>
      <div class="example">
    <input type="text" placeholder="Search...">
  </div>
    </body>

</html>

于 2018-12-12T19:43:27.403 に答える