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 class="items">
<input type="file" title="" id="image_input" accept="image/png, image/jpg">
<p>Add pictures</p>
</div>>Solution :
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 class="items">
<input type="file" title="" id="image_input" accept="image/png, image/jpg">
<span>Add pictures</span>
</label>