HTML Form Input Background Image

Question

I am currently working some on CSS for a site. I would like to stylize some input fields so they have a background image. I did put the background image behind the entire form, but I am having having a hard time getting each individual input field to stay lined with the background image when I resize the browser. Ideally, I would like to have each individual input field to have its own background image. Any suggestions?

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

Possible duplicate of show background image in the input text field — jarvo69
– jarvo69, Commented Aug 22, 2016 at 4:29

Fiido93 · Accepted Answer · 2016-08-22 04:45:52Z

For UX, I highly advised do not use background image as your background input field. I would recommend you styling like this form input.

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

Anju · Accepted Answer · 2016-08-22 07:40:49Z

Styling or animating your form field:

This will expand your text box if you click on the text box.

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

Collectives™ on Stack Overflow

HTML Form Input Background Image

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related