HTMLフォームの入力背景画像

現在、サイトのCSSで作業しています。私はいくつかの入力フィールドを書式化して背景イメージを持つようにしたいと思います。私はフォーム全体の背後に背景イメージを置いていましたが、ブラウザのサイズを変更すると、個々の入力フィールドに背景イメージが並んでいるのが苦労しています。理想的には、それぞれの入力フィールドに独自の背景イメージを持たせたいと思います。助言がありますか？HTMLフォームの入力背景画像

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 

    <style type="text/css"> 

     * { 
      /*margin-left: 10px;*/ 
      font-family: 'Verdana', sans-serif; 
     } 

     header { 
      /*background-color: white;*/ 
     } 

     body { 
      background-color: #002254; 
      /*margin: 0;*/ 
     } 

     #answers { 
      /*position: absolute;*/ 
      text-align: center; 
      color: white; 
      background: #FFF url("form_ribbons.png"); 
      background-repeat: no-repeat; 
      background-position: center; 
      /*position: relative;*/ 
      background-color: transparent; 
      height: 80px; 
      /*margin: 0 auto;*/ 
     } 

     #number { 
      position: absolute; 
      /*top: 100px;*/ 
      /*left: 115px;*/ 
      left: 8.5%; 
     } 

     #state { 
      position: absolute; 
      /*top: 100px;*/ 
      /*left: 400px;*/ 
      left: 8.5%; 
      display: none; 
     } 

     #abbrev { 
      position: absolute; 
      /*top: 100px;*/ 
      /*left: 680px;*/ 
      display: none; 
     } 

     #cap { 
      position: absolute; 
      /*top: 100px;*/ 
      /*left: 960px;*/ 
      display: none; 
     } 

     #submit { 
      display: none; 
     } 

     #red { 
      position: absolute; 
      background-image: url("blank_us_map.png"); 
      background-size: 500px 310px; 
      background-repeat: no-repeat; 
      height: 310px; 
      width: 500px; 
      margin-top: 60px; 
     } 

     .answer { 
      /*padding-bottom: 23px;*/ 
      margin-top: 20px; 
      /*width: 800px;*/ 
    /*  margin-right: 30px; 
      margin-left: 30px;*/ 
     } 

     .instructions, h1 { 
      margin-right: 20px; 
      margin-left: 20px; 
     } 

     input { 
      background: none; 
      border: none; 
      outline: none; 
      text-align: center; 
     } 

     ::-webkit-input-placeholder { /* Chrome */ 
      color: white; 
     } 

     :-ms-input-placeholder { /* IE 10+ */ 
      color: white; 
     } 

     ::-moz-placeholder { /* Firefox 19+ */ 
      color: white; 
      opacity: 1; 
     } 

     :-moz-placeholder { /* Firefox 4 - 18 */ 
      color: white; 
      opacity: 1; 
     } 

    </style> 
</head> 
<body> 
    <header> 
     <h1 id="title">Learn Your States and Capitals</h1> 
     <p class="instructions">Choose a number first, then enter its state, abbreviation, and capital. Hit submit to start a list of answers.</p> 
     <p class="instructions"><strong>Checking your answers: </strong>Shake your device once to bring up a map labeled with the state names and capitals. Shake it again to bring up a map labeled with the state abbreviations. Shake it once more to go back to the map with just the numbers.</p> 
     <div id="guesses"><p id="guess"></p></div> 
     <p id="numberresult">State Number:</p> 
     <p id="stateresult">State:</p> 
     <p id="abbrevresult">State Abbreviation:</p> 
     <p id="capresult">State Capital:</p> 
     </br> 
     <p id="score">Score: 0</p> 

      <p id="answers"> 
       <input type="text" id="number" class="answer" placeholder="Number from Map Below"> 
       <!-- </br> --> 
       <input type="text" id="state" class="answer" placeholder="Number's State"> 
       <!-- </br> --> 
       <input type="text" id="abbrev" class="answer" placeholder="State's Abbreviation"> 
       <!-- </br> --> 
       <input type="text" id="cap" class="answer" placeholder="State's Capital"> 
       </br> 
       <button id="submit">Submit</button> 
       </br> 
       </br> 
      </p>

出典

2016-08-22 user4531234

（http://stackoverflow.com [入力テキストフィールドに表示する背景画像]の可能性のある重複/ questions/20490856/show-background-image-in-the-input-text-field） –

UXの場合、背景入力フィールドとして背景イメージを使用しないことを強くお勧めします。このフォーム入力のようなスタイリングをお勧めします。

HTML

<div class="group">  
     <input type="text" required> 
     <span class="highlight"></span> 
     <span class="bar"></span> 
     <label>Name</label> 
    </div>

CSS

/* form starting stylings ------------------------------- */ 
.group   { 
    position:relative; 
    margin-bottom:45px; 
} 
input    { 
    font-size:18px; 
    padding:10px 10px 10px 5px; 
    display:block; 
    width:300px; 
    border:none; 
    border-bottom:1px solid #757575; 
    background:transparent; 
} 
input:focus   { outline:none; } 

/* LABEL ======================================= */ 
label    { 
    color:#999; 
    font-size:18px; 
    font-weight:normal; 
    position:absolute; 
    pointer-events:none; 
    left:5px; 
    top:10px; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all; 
} 

/* active state */ 
input:focus ~ label, input:valid ~ label  { 
    top:-20px; 
    font-size:14px; 
    color:#5264AE; 
}

DEMO

出典

2016-08-22 04:45:52 Fiido93

スタイリングしたり、フォームフィールドをアニメーション：

この意志EXPANテキストボックスをクリックすると、テキストボックスが表示されます。

CSS：

<style> 
    input[type=text] { 
     width: 130px; 
     box-sizing: border-box; 
     border: 2px solid #ccc; 
     border-radius: 4px; 
     font-size: 16px; 
     background-color: white; 
     background-position: 10px 10px; 
     background-repeat: no-repeat; 
     padding: 12px 20px 12px 40px; 
     -webkit-transition: width 0.4s ease-in-out; 
     transition: width 0.4s ease-in-out; 
    } 

    input[type=text]:focus { 
     width: 100%; 
    } 
    </style>

HTML

<form> 
     <input type="text" name="search" placeholder="Search.."> 
    </form>

Run Snippet

出典

2016-08-22 07:40:49 Anju

HTMLフォームの入力背景画像

答えて

関連する問題