fitting a p tag under an input tag-CodePudding

I have an input button to upload images but I wanted to style it a certain way and because the input tag doesn't offer that many styling options I decided to go with having a parent div that includes a p tag and an input tag but with the p tag under the input with the input being transparent. That way the whole parent div being clicked will trigger the file upload but I'm having trouble fitting and centering the p tag under the input tag. How can I make the p tag visible but under the input tag and also centered? Also, when hovered the background of the main div changes so the p tags color needs to change to white but it is under so how can I make that visible when changing the text color to white. Any help is appreciated. Thanks in advance.

.items {
  position: relative;
  width: 50%;
  height: 70%;
  border-radius: 8px;
  border: 1px solid #000000;
  margin: auto;
}

.items input {
  z-index: 1000;
  width: 100%;
  height: 100%;
  border: 1px solid #000000;
  background-color: transparent;
  opacity: 0;
  cursor: pointer;
}

.items:hover p {
  color: #ffffff;
}

.items:hover {
  cursor: pointer;
  background-color: rgb(224, 0, 0, 1);
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.items p {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0%;
  color: rgb(224, 0, 0, 1);
  font-size: 1.2vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<div >
  <input type="file" title="" id="image_input" accept="image/png, image/jpg">
  <p>Add pictures</p>
</div>

CodePudding user response：

The problem is that you have a negative z-index on "Add pictures" and it is also relatively positioned, so it cannot be entered properly as you expected.

A solution will be to absolutely position it, and use pointer-events: none instead to allow click events to pass through (if needed). However, that is not necessary if you change the wrapping parent to <label>: when it is clicked on, it will automatically trigger the focus event on the nested <input> element without any further work. This is a native behaviour of <label> and you can take advantage of that in your use case.

p/s: You no longer need to use vendor prefixes for CSS transition property, as its support is almost universal. Also, -ms-transition never existed.

Here is a proof-of-concept example of what you intend to achieve:

.items {
  position: relative;
  width: 50%;
  height: 70%;
  border-radius: 8px;
  border: 1px solid #000000;
  margin: auto;
  display: block;
  cursor: pointer;
}

.items input {
  width: 100%;
  height: 100%;
  border: 1px solid #000000;
  background-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.items:hover span {
  color: #fff;
}

.items:hover {
  cursor: pointer;
  background-color: rgb(224, 0, 0, 1);
  transition: all 0.15s ease-in-out;
}

.items span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  color: rgb(224, 0, 0, 1);
  font-size: 1.2vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin: auto;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

<label >
  <input type="file" title="" id="image_input" accept="image/png, image/jpg">
  <span>Add pictures</span>
</label>

CodePudding user response：

this isn't the best way, but is this the desired output?

.items {
  position:relative;
  width: 50%;
  height: 70%;
  border-radius: 8px;
  border: 1px solid #000000;
  margin: auto;
}

.items input {
  z-index: 1000;
  width: 100%;
  height: 100%;
  border: 1px solid #000000;
  background-color: transparent;
  opacity: 0;
  cursor: pointer;
}

.items:hover p {
  color: #ffffff;
}

.items:hover {
  cursor: pointer;
  background-color: rgb(224, 0, 0, 1);
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.items p {
  
  position:absolute;
  color: rgb(224, 0, 0, 1);
  font-size: 1.2vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: -1;
  top:25px;
  left:45%;
}

<div >
  <input type="file" title="" id="image_input" accept="image/png, image/jpg"><br>
  <p>Add pictures</p>
</div>

CodePudding user response：

place the p tag below the div and make some minor changes to your css

.items {
  
  width: 50%;
  height: 70%;
  border-radius: 8px;
  
  margin: auto;
}

input{
   border 1px solid red;
   }

.items input {
  z-index: 1000;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  background-color: transparent;
  opacity: 1;
  cursor: pointer;
}

p:hover {
  color: blue;
}

.items:hover {
  cursor: pointer;
  background-color: rgb(224, 0, 0, 1);
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

p {
  
 
  color: rgb(224, 0, 0, 1);
  font-size: 1.2vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin: 0 auto;
  text-align:center;
  width: 100%;
  height: 100%;
  z-index: -1;
  top:25px;
  left:45%;
}

<div >
  <input type="file" title="" id="image_input" accept="image/png, image/jpg"><br>
  <p>Add pictures</p>

</div>