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됩니다 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 양식 입력 배경 이미지

답변

관련 문제