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 /問題/ 20490856 /顯示背景圖像-內式輸入文本字段） –

對於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 d你的文本框，如果你點擊文本框。

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表單輸入背景圖片

回答

相關問題