React Background attributes

Ok, here goes nothing. Is there a way to add an onClick to a background…? I know it sounds stupid but the only way i could get an image into a certain position with it being responsive at the same time is to set it as the background… From the image I am about to post you can probably already guess what I want it to do…Screenshot 2020-11-10 at 18.14.44
I want to be able to click on the eye to show/hide the password but also change the image to one with a line through it…?

It is presumably the background of a div or span or something. You can give that element an onclick.

its the background of an input which is inside a div, so yes… but if I was to add the onClick onto that, the element would be the whole input box wouldnt it…?

The background is the full size of the element, so you’re going to have that problem.

yeah, not too sure how this is going to work lol

i was thinking of adding a blank button over it so it looks like the image is the button but i would then have the same problem of it being responsive… right?

I think we are going to have to see your actual code before we can answer that question. I’m not sure why you think your current solution is the only responsive solution since I can’t see what you’ve done.

its hard to show the code because nothing is really happening. its an input box with a placeholder and the image is in the .css file being set as background

I’m not sure an image of your CSS is good enough. If you want to be able to click on something to trigger an action then that something needs to be an element that can be clicked on. So your current solution doesn’t seem like it is going to work (at least not the way you want it to). What I’m trying to figure out is why you think your current solution is the only responsive solution. Being able to see everything (HTML/CSS/JS) would help us figure out alternative options for you.

Also, don’t post images of the code. Use triple backticks to embed the code in this thread or point us to a repo or something where it is publicly available (which is probably the best solution).

Ok, so here is where the input box is being rendered… do you want the css aswell…?

<div className="mainContent">
      <h2 className="firstStatement">
        Enter a password and we will tell you how secure it really is!
      </h2>
      <div className="inputImg">
        <input
          type="text"
          placeholder="Enter password here..."
          className="input"
        />{" "}
      </div>
      <h3 className="secondStatement">
        All entries are 100% secure and not stored in any way or shared with
        anyone.
      </h3>
    </div>

I want it to be like that and for the eye to stay where it is inside of the input box

Yes, put the CSS here as well (I don’t feel like typing it all out from an image :slight_smile:

  .firstStatement {
  margin-top: 110px;
  text-align: center;
  color: #05386b;
  font-size: 1.25em;
  margin-bottom: 45px;
}

.input[type="text"] {
  background-color: white;
  display: block;
  margin: 0 auto;
  width: 30%;
  background: url(https://icon-library.com/images/show-hide-icon/show-hide-icon-14.jpg)
    no-repeat right 10px center;
  background-size: 15px 15px;
  border: 0px;
  outline: 0px;
  border-bottom: 1px solid rgb(65, 201, 255);
}

.input:hover {
  cursor: inherit;
}

.input:focus {
  border-bottom: 1px solid rgb(22, 104, 255);
}

.secondStatement {
  text-align: center;
  color: #05386b;
  margin-top: 10px;
  font-size: 0.6em;
}

OK, so what would make it non-responsive if you added a <span> immediately after the <input> to hold the eye icon and then wrapped both of them in a <div> for styling? This would allow you to be able to click on the eye.

Actually, I guess you already have a <div> around them.

And @DanCouper is right, it should be a <button>, I missed that.

The eye icon is a button. You can hack it so that you get some shenanigans where that eye icon is part of the background of the input, but all you’re doing is making things 10× more complicated and completely inaccessible. Make it a button, wrap it and the input in the same container, absolutely position the eye button on the right, pad the input by the same width as the eye button.

yeah the div is around them, when I had the image tag after the input, i was using margin right in CSS, so when I made the window bigger or smaller, the image would move into the input and all sorts. I need to get the eye to be inside the input and then use margin right for that… would a span do this…?

<divorwhatever>
  <input>
  <button>
</divorwhatever>
divorwhatever {
  position: relative;
}

input {
  display: block;
  padding-right: whateverthewidthis;
}

button {
  position: absolute;
  right: 0;
  width: whateverthewidthis;
}

Actually, you don’t need it inside the <input>. If you are referring to the border you want around this, you put the border on the <div> wrapping both the <input> and the <button>.

Also, I’ll point out that to be completely accessible you also need a <label> for the <input>. The <label> would contain the “Enter your password” string and you could use positioning to put that where you want.

doesn’t using the attribute .right make the button appear elsewhere with a smaller browser window though…?