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

问题描述 投票：0回答：1

我是这个论坛的新手，实际上是一般编码的新手，所以如果我的问题或查询的格式看起来有点不传统，我会预先道歉。

我已经使用this 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背景图像属性添加图标可以解决这个问题，但我需要使用HTML标签，因为我正在使用图像（在CSS中）做一些事情，如果我使用CSS背景图像属性，我将无法做到这一点.

所以，我正在考虑使用 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 image input contact-form
1个回答
0
投票

标签

<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 在单击图标时将焦点集中到输入上。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.