将图像图标添加到输入框中，该输入框在单击时选择输入框-解网

问：

我是这个论坛的新手，实际上是 generell 编码的新手，所以如果我的问题或我的询问形式看起来有点不合常规，我会提前道歉。

我使用这个 YouTube 教程创建了一个类似的联系表格。我做了一些与视频中显示不同的事情，这导致了一些问题。我设法解决了其中的大部分问题，但还有一个问题尚未解决。让我解释一下：

在时间戳 12：50，YouTuber 使用 fontawsome.com 中的图标，他使用标签将其放入标签中。相反，我决定从 Google Fonts 下载相应的图标以将它们存储在本地。我尝试使用放置在标签中的标签插入图标，但是因为这严重扰乱了我的格式，我决定将标签放在标签下和标签顶部，然后使用 css 修复任何剩余的格式问题。

这是我的一个输入框在 HTML 端的样子。

<div class="contact-input-group">
      <input type="text" id="name" name="name" placeholder="" required>
      <img src="img/icons/name-icon.svg" alt="name-icon"> 
      <label for="name">Your Name*</label>
</div>

现在，我遇到的问题是，当我单击图标所在的输入框的最左侧时，输入框未被选中（我无法在其中输入任何内容）。这是因为图像位于输入框的顶部。将标签放在标签的顶部或下方不会改变这一点。由于标签不在标签中，因此不会选择输入框。使用 CSS background-image 属性添加图标可以解决这个问题，但我需要使用 HTML 标签，因为我正在对图像（在 CSS 中）执行如果我使用 CSS background-image 属性就无法执行的操作。

所以，我正在考虑使用CSS选择器来选择输入框，如果点击图标，但老实说，这是我所得到的。我不确定哪个CSS选择器会做这件事，或者即使CSS选择器是要走的路。

基本上就是这样。我希望这里的任何人都能够并愿意帮助我解决这个问题。我更喜欢仅 HTML + CSS 的解决方案，但如果可以解决问题，也可以继续使用 JavaScript 和 PHP。

编辑：下面我粘贴了我网站联系部分的整个HTML和CSS代码。

/*Contents from my Reset Stylesheet that are needed to make this look like its supposed to */



/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/

/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
    all: unset;
    display: revert;
  }
  
  /* Preferred box-sizing value */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /*
    Remove list styles (bullets/numbers)
    in case you use it with normalize.css
  */
  ol, ul {
    list-style: none;
  }
  
  /* For images to not be able to exceed their container */
  img {
    max-width: 100%;
  }
  
  /* Removes spacing between cells in tables */
  table {
    border-collapse: collapse;
  }
  
  /* Revert the 'white-space' property for textarea elements on Safari */
  textarea {
    white-space: revert;
  }


/*Contents from my Main Stylesheet that are needed to make this look like its supposed to */


@font-face {
    font-family: Patua One;
    src: url(../fonts/PatuaOne-Regular.ttf);
    
}



:root{
    --theme-color: #f15b26;
    --bg-color: #000000;
    --bg-color-2: #fff;
    --text-color: #000000;
    --text-color-2: #fff;  
    font-size: 62.5%;
}

.wrapper-main {
    width: 80vw;
    margin: 0 auto;
}


h2 {
    font-size: 2rem;
    line-height: 2.6rem;
    color: var(--text-color-2);
    font-family: Patua One;
    font-weight: 600;
}

h3 {
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--text-color-2);
    font-family: Patua One;
    font-weight: 600;
}

h4 {
    font-size: 1.6rem;
    line-height: 2.2rem;
    color: var(--text-color-2);
    font-family: Patua One;
    font-weight: 600;
}




/*All of the CSS speficially intendet for my Contact Us Page.*/



.contact-us {
    width: 100%;
    padding: 6rem 0px;
    background-color: var(--theme-color);
}

.contact-us-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-us-flex h2, .contact-us-flex h3 {
    text-transform: uppercase;
    padding-bottom: 6rem;
    flex-basis: 100%;
    text-align: center;
}

.contact-form {
    padding-bottom: 6rem;
    width: 90%;
    max-width: 60rem;
}

.contact-input-group {
    margin-bottom: 3rem;
    position: relative;
}

.contact-input-group input, .contact-input-group textarea {
    width: 100%;
    padding: 1rem;
    border: 1.5px solid var(--bg-color-2);
    color: var(--text-color-2);
    font-size: 1.6rem;
    font-family: Patua One;
    transition: all ease-in-out 200ms;
}

.contact-input-group input:focus, 
.contact-input-group textarea:focus {
    border: 1.5px solid var(--bg-color);
    color: var(--text-color);
}

.contact-input-group input:focus~label,
.contact-input-group textarea:focus~label {
    color: var(--text-color);
}

.contact-input-group input:focus~img,
.contact-input-group textarea:focus~img {
    filter: brightness(0%);
}


.contact-input-group textarea {
    resize: vertical;
    min-height: 4rem;
}

.contact-input-group label {
    height: 100%;
    position: absolute;
    left: 3rem;
    top: 0;
    padding: 1rem;
    color: var(--text-color-2);
    /*cursor: text;*/
    font-size: 1.6rem;
    font-family: Patua One;
    transition: all ease-in-out 200ms;
}

.contact-input-group img {
    filter: brightness(0) invert(1);
    transition: all ease-in-out 200ms;
    position: absolute;
    left: 0;
    top: 0;
    padding: 1rem;
}


.contact-input-group input:not(:placeholder-shown)~label,
.contact-input-group input:focus~label,
.contact-input-group textarea:not(:placeholder-shown)~label,
.contact-input-group textarea:focus~label,
.contact-input-group input:not(:placeholder-shown)~img,
.contact-input-group input:focus~img,
.contact-input-group textarea:not(:placeholder-shown)~img,
.contact-input-group textarea:focus~img {
    top: -3.5rem;
    font-size: 1.4rem;
}

.input-box-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-box-row .contact-input-group {
    flex-basis: 48%;
}

.contact-form button {
    width: 100%;
    padding: 1rem 0;
    color: var(--text-color-2);
    border: 1.5px solid var(--bg-color-2);
    cursor: pointer;
    font-size: 1.6rem;
    font-family: Patua One;
    text-align: center;
    transition: all ease-in-out 200ms;
}

.contact-form button:hover {
    color: var(--text-color);
    border: 1.5px solid var(--bg-color);
}

<section id="contact-us" class="contact-us">
            <div class="wrapper-main contact-us-flex">
                <h2>Contact Us</h2>
                <h3>Using our Contact Form</h3>
                <form class="contact-form" action="contact-form-handler.php" method="post">
                    <div class="input-box-row">
                        <div class="contact-input-group">
                            <input type="text" id="name" name="name" placeholder="" required>
                            <img src="img/icons/name-icon.svg" alt="name-icon"> 
                            <label for="name">Your Name*</label>
                        </div>
                        <div class="contact-input-group">
                            <input type="text" id="company-name" name="company-name" placeholder="">
                            <img src="img/icons/company-icon.svg" alt="company-icon">
                            <label for="company-name">Company Name</label>
                        </div>
                    </div>
                    <div class="input-box-row">
                        <div class="contact-input-group">
                            <input type="email" id="email" name="email" placeholder="" required>
                            <img src="img/icons/email-icon.svg" alt="email-icon">
                            <label for="email">Your Email*</label>
                        </div>
                        <div class="contact-input-group">
                            <input type="tel" id="phone-number" name="phone-number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" placeholder="">
                            <img src="img/icons/tel-icon.svg" alt="tel-icon"> 
                            <label for="phone-number">Phone Number</label>
                        </div> 
                    </div>
                    <div class="contact-input-group">
                        <input type="text" id="subject" name="subject" placeholder="" required>
                        <img src="img/icons/subject-icon.svg" alt="subject-icon">
                        <label for="subject">Subject*</label>
                    </div>
                    <div class="contact-input-group">
                        <textarea id="message" rows="8" name="message" placeholder="" required></textarea>
                        <img src="img/icons/message-icon.svg" alt="message-icon"> 
                        <label for="message">Your Message*</label>
                    </div>
                    <button type="submit" value="submit">Submit</button>
                </form>
                <h3>Or Email Us Directly</h3>
                <div class="contact-info">
                    <h4>Blank</h4>
                    <h4>Blank</h4>
                </div>
                <div class="contact-info">
                    <h4>Blank</h4>
                    <h4>Blank</h4>
                </div>
            </div>
        </section>

html css 图像输入联系表单

0赞 Nick Friesen 10/25/2023

您可能想尝试将 z-index 添加到您的 CSS 中。这将允许您将输入字段放置在图像上方。如果您从链接的视频中遵循设计，则不会遇到设计问题。只需确保您的输入字段的 z 索引高于 img 元素即可。

0赞 Banana 10/25/2023

@NickFriesen（我希望这是我应该回复你的方式），不幸的是，z-index 不起作用。我尝试将 .contact-input-group img {} 设置为 z 索引为 0，将 .contact-input-group 输入，.contact-input-group textarea {} 设置为 z-index 为 100，但这并没有解决问题。我确保缓存不会给我带来错误的结果。但是谢谢你的提示，我实际上还没有想到这一点。

0赞 Nick Friesen 10/25/2023

感谢您让我知道 - 您是否能够复制并粘贴您正在处理的所有代码？这样我就可以提供帮助，因为在我这边进行故障排除时，我将能够看到表单的运行情况。

1赞 Banana 10/25/2023

@NickFriesen，首先感谢您抽出宝贵时间并帮助我。我刚才已经这样做了。图标消失了，因为它们存储在我的计算机上，但问题仍然存在，而是在那里的占位符图标。我希望这会有所帮助。

答：

0赞 Kasumi 10/25/2023 #1

标签通过标签和输入的属性连接。当您单击标签时，连接的输入将获得焦点。因此，如果您替换标签中的图标，则单击它时将没有任何效果。它与任何东西都没有连接。<label><input>for="name"id="name"

要仅使用 html+css 解决此问题，您需要将图标移动到标签内。

<div class="contact-input-group">
    <input type="text" id="name" name="name" placeholder="" required>
    <label for="name">
        <img src="img/icons/name-icon.svg" alt="name-icon"> Your Name*
    </label>
</div>

或者，您需要使用 javascript 在单击图标时将焦点放在输入上。

/*Contents from my Reset Stylesheet that are needed to make this look like its supposed to */


/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/


/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */

*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}


/* Preferred box-sizing value */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/*
        Remove list styles (bullets/numbers)
        in case you use it with normalize.css
      */

ol,
ul {
  list-style: none;
}


/* For images to not be able to exceed their container */

img {
  max-width: 100%;
}


/* Removes spacing between cells in tables */

table {
  border-collapse: collapse;
}


/* Revert the 'white-space' property for textarea elements on Safari */

textarea {
  white-space: revert;
}


/*Contents from my Main Stylesheet that are needed to make this look like its supposed to */

@font-face {
  font-family: Patua One;
  src: url(../fonts/PatuaOne-Regular.ttf);
}

 :root {
  --theme-color: #f15b26;
  --bg-color: #000000;
  --bg-color-2: #fff;
  --text-color: #000000;
  --text-color-2: #fff;
  font-size: 62.5%;
}

.wrapper-main {
  width: 80vw;
  margin: 0 auto;
}

h2 {
  font-size: 2rem;
  line-height: 2.6rem;
  color: var(--text-color-2);
  font-family: Patua One;
  font-weight: 600;
}

h3 {
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: var(--text-color-2);
  font-family: Patua One;
  font-weight: 600;
}

h4 {
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: var(--text-color-2);
  font-family: Patua One;
  font-weight: 600;
}


/*All of the CSS speficially intendet for my Contact Us Page.*/

.contact-us {
  width: 100%;
  padding: 6rem 0px;
  background-color: var(--theme-color);
}

.contact-us-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.contact-us-flex h2,
.contact-us-flex h3 {
  text-transform: uppercase;
  padding-bottom: 6rem;
  flex-basis: 100%;
  text-align: center;
}

.contact-form {
  padding-bottom: 6rem;
  width: 90%;
  max-width: 60rem;
}

.contact-input-group {
  margin-bottom: 3rem;
  position: relative;
}

.contact-input-group input,
.contact-input-group textarea {
  width: 100%;
  padding: 1rem;
  border: 1.5px solid var(--bg-color-2);
  color: var(--text-color-2);
  font-size: 1.6rem;
  font-family: Patua One;
  transition: all ease-in-out 200ms;
}

.contact-input-group input:focus,
.contact-input-group textarea:focus {
  border: 1.5px solid var(--bg-color);
  color: var(--text-color);
}

.contact-input-group input:focus~label,
.contact-input-group textarea:focus~label {
  color: var(--text-color);
}

.contact-input-group input:focus~img,
.contact-input-group textarea:focus~img {
  filter: brightness(0%);
}

.contact-input-group textarea {
  resize: vertical;
  min-height: 4rem;
}

.contact-input-group label {
  height: 100%;
  position: absolute;
  left: 3rem;
  top: 0;
  padding: 1rem;
  color: var(--text-color-2);
  /*cursor: text;*/
  font-size: 1.6rem;
  font-family: Patua One;
  transition: all ease-in-out 200ms;
}

.contact-input-group img {
  filter: brightness(0) invert(1);
  transition: all ease-in-out 200ms;
  position: absolute;
  left: 0;
  top: 0;
  padding: 1rem;
}

.contact-input-group input:not(:placeholder-shown)~label,
.contact-input-group input:focus~label,
.contact-input-group textarea:not(:placeholder-shown)~label,
.contact-input-group textarea:focus~label,
.contact-input-group input:not(:placeholder-shown)~img,
.contact-input-group input:focus~img,
.contact-input-group textarea:not(:placeholder-shown)~img,
.contact-input-group textarea:focus~img {
  top: -3.5rem;
  font-size: 1.4rem;
}

.input-box-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input-box-row .contact-input-group {
  flex-basis: 48%;
}

.contact-form button {
  width: 100%;
  padding: 1rem 0;
  color: var(--text-color-2);
  border: 1.5px solid var(--bg-color-2);
  cursor: pointer;
  font-size: 1.6rem;
  font-family: Patua One;
  text-align: center;
  transition: all ease-in-out 200ms;
}

.contact-form button:hover {
  color: var(--text-color);
  border: 1.5px solid var(--bg-color);
}

<section id="contact-us" class="contact-us">
  <div class="wrapper-main contact-us-flex">
    <form class="contact-form" action="contact-form-handler.php" method="post">
      <div class="input-box-row">

        <div class="contact-input-group">
          <input type="text" id="name" name="name" placeholder="" required>
          <!-- When clicked, find the element by ID and set focus on it -->
          <img src="img/icons/name-icon.svg" alt="name-icon" onclick="document.getElementById('name').focus()">
          <label for="name">Your Name*</label>
        </div>

        <div class="contact-input-group">
          <input type="text" id="company-name" name="company-name" placeholder="">
          <img src="img/icons/company-icon.svg" alt="company-icon" onclick="document.getElementById('company-name').focus()">
          <label for="company-name">Company Name</label>
        </div>
      </div>
    </form>
  </div>
</section>

0赞 Banana 10/25/2023

感谢您的帮助。正如我在最初的询问中提到的，将 <img> 标签放入 <label> 对我来说并不是一个真正的选择，但您的 JS 解决方案是完美的。它可以在不破坏我的格式的情况下工作，这就是它的重点。再次感谢。

上一个：已提交联系表格，但我没有收到任何电子邮件:(

下一个：为什么我的 <script> 联系表单突然加载需要很长时间？我找不到问题

将图像图标添加到输入框中，该输入框在单击时选择输入框

Adding an Image Icon into an Input Box that Selects the Input Box when Clicked

评论

评论