个人中心
gpt4 book ai didi

HTML 表单输入背景图片

转载 作者：太空宇宙 更新时间：2023-11-04 09:51:12 25 4
gpt4 key购买 nike

我目前正在为一个网站做一些 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>

最佳答案

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

关于HTML 表单输入背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39071349/

25 4 0
文章推荐： java - 打印字符串数组中的所有名称
文章推荐： python - 估计 Von Mises 分布的参数 Scipy - 不一致的答案
文章推荐： php - 使 MySQL 条目过期
文章推荐： java - 在多线程 Java 应用程序中创建缓存的深拷贝
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com