Question

我目前正在为网站上的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>

Answer 1

对于UX，我强烈建议不要使用背景图像作为背景输入字段。我建议你像这样的表格输入样式。

<强> HTML

eg: ROOT >>
            PARENT >>
                      CHILD

<强> CSS

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

DEMO

Answer 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

HTML表单输入背景图像

2 个答案: