Question

我尝试在其中输入一个带有提交按钮的输入字段。我没有使用“普通”提交按钮，而是尝试在输入字段中插入一个小图标，但没有任何成功。我无法在输入字段中获取图像（尺寸为30 * 30像素）。

<!DOCTYPE html>
<html>
    <head>
        <style>
            input[type=text] {
                position: relative;
                width: 200px;
                height: 36px;
                box-sizing: border-box;
                border: 2px solid #4d7fc3;
                border-radius: 4px;
                font-size: 16px;
                background-color: white;
                padding: 2px 2px 2px 10px;
            }
            input[type=submit] {
                position: absolute
                width: 30px;
                height: 30px;
                top: 0px;
                right: 0px;
                /* background-color: #4d7fc3; */
                   border: none;
                   color: white;
                   background-image: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG');
                   display: block;
                   background-position: 100px 100px 100px 100px; */
                /* background-repeat: no-repeat; */
                /* padding: 2px 2px 2px 30px; */
                    z-index: -1;
                margin: 10px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <p>Input with icon:</p>
        <form>
            <div id="Search">
                  <input type="text" name="search" placeholder="Search..">
                  <input type="submit" value="">
            </div>
        </form>
    </body>
</html>

它应该是这样的：

Answer 1

这是用HTML和CSS完成的。

＆＃13;

<form class="form-wrapper cf">
    <input type="text" placeholder="Search..." required>
    <button type="submit">Search</button>
</form>

＆＃13;

{{1}}

＆＃13;

Answer 2

您上面粘贴的代码中存在相当多的错误，这些错误并没有给您带来任何好处。

您在;输入中的position: absolute;属性后面遗漏了submit。为了使该元素正确定位，您需要父容器为position: relative;。在这种情况下，父容器为#Search。

一旦处理完毕，由于不必要，可以删除相当多的属性。看看我的代码是否有帮助...

#Search {
  position: relative;
  display: inline-block;
}

input[type=text] {
  position: relative;
    width: 200px;
    height: 36px;
  box-sizing: border-box;
  border: 2px solid #4d7fc3;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  /* 40px padding to account for submit   */
  padding: 2px 40px 2px 10px; 
}
input[type=submit] {
  position:absolute;
  width: 30px;
  height: 100%;
  top: 0px;
  right: 0px;
  border: none;
  color: white;
  background: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG') #4d7fc3 center center no-repeat;
  display: block;
  cursor: pointer;
}

Working codepen here.

请注意，submit的背景图片引用了您的计算机上的本地文件，因此除了您之外，其他任何人都无法真正看到它。请务必从index.html文件中为其指定正确的路径。

希望这有帮助。

Answer 3

尝试了两种变体，两种变体都可以使用，第二种解决方案是最彻底的

HTML5 / CSS输入字段，输入字段中包含图像作为提交按钮

3 个答案: