I've encountered a strange issue where I can't seem to select or highlight text in my form fields.
Despite everything else appearing to work correctly, this particular problem has me stumped.
I've tried on both Chrome and Safari, but highlighting text just doesn't seem to work at all.
{
position:relative;
width:100%;
margin-bottom:-20px;
}
.outerForm img {
width:800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
form {
display: table;
position:absolute;
top:0px;
left:0px;
right:0px;
margin-left: auto;
margin-right: auto;
color:black;
width:600px;;
height:300px;
margin-top: 100px;
}
.innerForm > input, .innerForm > label {
display: inline-block;
vertical-align: top;
margin-left: 5px;
margin-top: 25px;
margin-right: 5px;
}
.innerForm > label {
width:70px;
text-align: left;
}
#messageLabel {
}
input[type="text"] {
width:200px;
height:30px;
border:none;
outline:none;
box-shadow: none;
background-color:transparent;
border-bottom: 1px solid black;
}
textarea {
resize: vertical;
width:85%;
border:none;
outline:none;
box-shadow: none;
background-color: transparent;
padding-bottom: 18%;
border-bottom: 1px solid black;
margin-top: 20px;
}
textarea:focus {
border:none;
outline:none;
background-color: transparent;
box-shadow: none;
border-bottom: 1px solid red;
}
.innerForm > h4 {
margin-bottom:-10px;
text-transform:none;
font-family: 'Novecento sans wide';
}
input[type="text"]:focus, input[type="textarea"] {
border:none;
outline:none;
background-color:transparent;
box-shadow: none;
border-bottom:1px solid red;
}
#submitBtn {
background-color:transparent;
color:black;
font-weight:400;
border:none;
outline:none;
border:2px solid white;
padding:10px 20px 10px 20px;
font-size: 15px;
margin-top:15px;
transition: all 0.5s ease;
}
#submitBtn:hover {
background-color: #0080ff;
color:white;
}<div class="outerForm">
<img id="cardImage" class="img-responsive" src="PlayingCardTemplate.png"/>
<form id="contactForm" action="Contact.php" method="POST">
<div class="innerForm">
<h4>Arshdeep Soni</h4>
<label id="nameLabel" for="name">Name:</label>
<input id="name" name="name" type="text"/>
<label id="phoneLabel" for="phone">Phone:</label>
<input id="phone" name="phone" type="text"/>
<label id="emailLabel" for="email">Email:</label>
<input id="email" name="email" type="text"/>
<label id="occasionLabel" for="occasion">Occasion:</label>
<input id="occasion" type="text" name="occasion"/>
<label id="messageLabel" for="message">Message:</label>
<textarea id="message" name="message" ></textarea>
<input type="submit" value="Submit" id="submitBtn" name="submit"/>
</div>
<p id="feedback"></p>
</form>
</div>