TechQA.

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

57 views Asked by At

I am new on this forum, and in fact new to coding in generell, so I'll apologise up front if my question or the format of my inquiry seem a bit unconventional.

I have used this YouTube Tutorial to create a similar contact form. I have done a few things differently than what is shown in the video, which has caused some issues. I managed to resolve most of them, but one issue remains that is yet to be resolved. Let me explain:

At Timestamp 12:50 the YouTuber uses icons from fontawsome.com which he puts into the tag using the tag. I have instead decided to download respective icons from Google Fonts to store them locally. I have tried inserting the icons using the tag placed into the tag, but because this messed with my formatting big time I decided to place the tags under the tags und on top of the tags, and then fixed any remaining formatting issues using css.

This is how one of my input boxes looks on the HTML side.

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

Now, the issue I am running into is that when I am clicking into the very left of the input box where the icon is located, the input box is NOT selected (I can't type anything into it). This is because the image is on top of the input box. Putting the tag on top of the tag, or below the tag won't change this. Because the tag isn't in the tag, the input box won't get selected. Adding the icon using the CSS background-image property would fix this, but I need to use the HTML tag because I am doing things with the images (in CSS) that I am unable to do if I am using the CSS background-image property.

So, I was thinking of using a CSS Selector to make the input boxes be selected if the icons are clicked, but this is honestly as far as I got. I am unsure which CSS Selector would do the deed, or even if CSS Selectors are the way to go.

This is basically it. I hope anyone here is able and willing to help me solve this issue. I would prefer an HTML + CSS only solution, but could also go ahead with JavaScript and PHP if that makes things solvable.

Edit: Below I have pastet the whole HTML and CSS code for the contact section of my site.

/*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
Original Q&A
1

There are 1 answers

1
Kasumi On

Tag <label> is connected with <input> through for="name" attribute of label and input id="name". When you click on a label, connected input gets focus. So if you replace icon from the label, there will be no effect when you click on it. It's not connected to anything.

To solve this problem using only html+css, you need to move the icon inside the label.

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

Or you need to use javascript to give focus to an input when icon is clicked.

/*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>

Related Questions in HTML

Related Questions in CSS

Related Questions in IMAGE

Related Questions in INPUT

Related Questions in CONTACT-FORM

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions