How to place ion-icon button icon inside an input field
I'm trying to place a font-icon (ion-icon md-arrow-forward as a button, but I'm unable to correctly locate icon at the right-edge of the input field. It wants to align about 50% outside the bottom of the input. (see screenshot attached). The <input type="text"> is positioned relative and the icon button <ion-icon> is positioned absolute. This worked in a simpler test block, but not quite good in the attached code. I'm hoping somebody can see how to fix this.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 2 meta tags must come first in the head -->
<title>Sample Form</title>
<link rel="stylesheet" href="./_css/main.css" crossorigin="anonymous">
</head>
<body>
<div class="c-form-email-icon container">
<form class="needs-validation form-box" novalidate method="post" action="./sendForm.php" name="contactForm">
<input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" />
<div class="form-row">
<div class="col-sm-12">
<!-- "form-group"> -->
<div class="input-group">
<label for="inputEmail" class="sr-only">Email address</label>
<input type="text" class="form-control form-control-sm" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter Your Email">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<ion-icon name="md-arrow-forward"></ion-icon>
</button>
</span>
</div>
</div>
</div>
<!--Note: recipients and required are Formmail required fields -->
<input type="hidden" name="recipients" value="hello@pricelearman.com" />
<input type="hidden" name="required" value="email:inputEmail" />
<!-- Optional Formmail <fieldset> -->
<input type="hidden" name="subject" value="A New Newsletter Subscriber" />
<input type="hidden" name="derive_fields" value="email=inputEmail" />
<input type="hidden" name="mail_options" value="Exclude=email, HTMLTemplate=response.htm" />
<input type="hidden" name="good_url" value="http://www.pricelearman.com/_modules/simple-form/sentSuccess.htm" />
<input type="hidden" name="bad_url" value="http://www.pricelearman.com/_modules/simple-form/sentFailure.htm" />
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="_js/vendor/jquery/3.3.1/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://unpkg.com/ionicons@4.5.5/dist/ionicons.js"></script>
</body>
</html>
[code]
.c-form-email-icon {
margin: 5rem auto;
min-width: 95vw;
}
//form.form-box {
// width:100%;
// max-width:50vw;
//}
.c-form-email-icon input-group {
position: relative;
}
ion-icon {
display: inline-block;
position: absolute;
z-index: 200;
top: 50%;
transform: translateY(-50%);
right: 0;
font-size: 1.8rem;
color: white;
padding: 0; //2rem;
border-left: 2px solid red;
background: black;
height: 100%;
}
ion-icon:hover {
color: red;
}
/* Input Styles
** ---------------------------------------------------------------------------------
*/
.c-form-email-icon input[type="text"],
.c-form-email-icon input[type="email"] {
//position: relative; // lock button position
width: 95vw;
line-height: 1.61803;
padding: .5rem 1.5rem;
margin: 0;
font-size: 1.4rem; // set font size for entered text
color: black; // set font color for entered text
background: #ccc; // set input field background
border: .2rem solid white;
-webkit-appearance: none; // remove default browser styling
appearance: none;
}
// Override default browser focus styles, except for keyboard nav
//
.c-form-email-icon:not(.user-is-tabbing) input:focus {
outline:none;
background: #ccc;
// color: black;
box-shadow: none;
border: .2rem solid red;
}
/* Placeholder Styles
** ---------------------------------------------------------------------------------
*/
.c-form-email-icon.input-group::-webkit-input-placeholder {
@media (min-width: 374.98px) {
font-size: $font-size-base * .375 * .8;
color:red;
}
@media (min-width: 375px) and (max-width: 575.98px) {
font-size: $font-size-base * .375 * .8;
color:blue;
}
@media (min-width: 576px) and (max-width: 767.98px) {
font-size: $font-size-base * 21/16 * .8;
color:green;
}
@media (min-width: 768px) and (max-width: 991.98px) {
font-size: $font-size-base * 25/16 * .8;
color:yellow;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
font-size: $font-size-base * 31/16 * .8;
color:orange;
}
@media (min-width: 1200px) {
font-size: $font-size-base * 52/16 * .8;
color:violet;
}
}
.c-form-email-icon::-moz-placeholder {
@media (min-width: 320px) {
font-size: 1.4rem;
color:red;
}
@media (min-width: 375px) and (max-width: 575.98px) {
font-size: $font-size-base * .375 * .8;
color:blue;
}
@media (min-width: 576px) and (max-width: 767.98px) {
font-size: $font-size-base * 21/16 * .8;
color:green;
}
@media (min-width: 768px) and (max-width: 991.98px) {
font-size: $font-size-base * 25/16 * .8;
color:yellow;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
font-size: $font-size-base * 31/16 * .8;
color:orange;
}
@media (min-width: 1200px) {
font-size: $font-size-base * 52/16 * .8;
color:violet;
}
}
:-ms-input-placeholder { /* IE 10+ */
@media (max-width: 374.98px) {
font-size: $font-size-base * .375 * .8;
color:red;
}
@media (min-width: 375px) and (max-width: 575.98px) {
font-size: $font-size-base * .375 * .8;
color:blue;
}
@media (min-width: 576px) and (max-width: 767.98px) {
font-size: $font-size-base * 21/16 * .8;
color:green;
}
@media (min-width: 768px) and (max-width: 991.98px) {
font-size: $font-size-base * 25/16 * .8;
color:yellow;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
font-size: $font-size-base * 31/16 * .8;
color:orange;
}
@media (min-width: 1200px) {
font-size: $font-size-base * 52/16 * .8;
color:violet;
}
}
:-moz-placeholder { /* Firefox 18- */
@media (max-width: 374.98px) {
font-size: $font-size-base * .375 * .8;
color:red;
}
@media (min-width: 375px) and (max-width: 575.98px) {
font-size: $font-size-base * .375 * .8;
color:blue;
}
@media (min-width: 576px) and (max-width: 767.98px) {
font-size: $font-size-base * 21/16 * .8;
color:green;
}
@media (min-width: 768px) and (max-width: 991.98px) {
font-size: $font-size-base * 25/16 * .8;
color:yellow;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
font-size: $font-size-base * 31/16 * .8;
color:orange;
}
@media (min-width: 1200px) {
font-size: $font-size-base * 52/16 * .8;
color:violet;
}
}
ion-icon {
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
font-size: 1.8rem;
color: white;
padding: 0 .5rem; //2rem;
//border-left: 2px solid red;
background: black;
max-width: 100%;
height: auto;
}
ion-icon:hover {
color: red;
}
/*
// Submit Button Styles
//----------------------------------------------------------------------------------------------------
div button[type="submit"] {
position: absolute;
background: $brand-secondary;
color: $brand-black;
bottom:4rem;
//font-size:$font-size-base-ss-1x;
border-radius: 0;
border: none;
padding:.5rem 1rem;
margin-bottom:-4rem;
cursor: pointer;
}
div button:hover {
background: rgba($brand-secondary, .85);
color: $brand-white;
}
*/ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.