HTML 表单输入背景图像答案

【问题标题】：HTML Form Input Background ImageHTML 表单输入背景图像
【发布时间】：2016-08-22 04:19:06
【问题描述】：

我目前正在为一个网站处理一些 CSS。我想对一些输入字段进行样式化，以便它们具有背景图像。我确实将背景图像放在了整个表单的后面，但是当我调整浏览器大小时，我很难让每个单独的输入字段与背景图像保持一致。理想情况下，我希望每个单独的输入字段都有自己的背景图像。有什么建议吗？

    <!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>

【问题讨论】：

show background image in the input text field的可能重复

标签： html css forms background-image input-field

【解决方案1】：

对于 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

【讨论】：

【解决方案2】：

为表单域设置样式或动画：

如果您单击文本框，这将展开您的文本框。

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

【讨论】：