Remove From My Forums

want to insert image under textbox at the end?

Question

User-1647172364 posted

Hlo Professionals!

I am having two textboxes in my code one for enter email and second for enter contact no. and my requirement is i need email image or glyphicon in email textbox under textbox at the end and same in contact no. i want to insert call image or glyphicon under textbox at the end. and also provide me both images download link.

Note: both images color i need black and png.

Here is my code

Please execute it.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CRYPTOCONTRACTS.UK</title>
<meta http-equiv="Content-Type" content="text/html" />
  <meta charset="utf-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=1" />
<link href="bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
   
<style>
 
 .container-fluid{background-color:#000;
  width:100%; 
 
 }
      .button {
        background-color: #1c87c9;
        -webkit-border-radius: 60px;
        border-radius: 6px;
        border: none;
        color: #eeeeee;
        cursor: pointer;
        
        font-family: sans-serif;
        font-size: 19px;
        padding: 10px 10px;
        text-align: center;
        text-decoration:blink;
		
      }
      @keyframes glowing {
        0% {
          background-color: #F00;
          box-shadow: 0 0 10px #F00;;
        }
        50% {
          background-color: #F00;
          box-shadow: 0 0 35px #F00;;
        }
        100% {
          background-color: #F00;
          box-shadow: 0 0 10px #F00;;
        }
      }
      .button {
        animation: glowing 1000ms infinite;
      }
	  
	   #Txtstyle2[type=text], textarea {         
      transition: all 0.30s ease-in-out;         
      outline: #F00;         
      border: 2px solid #F00;
	  padding:0.7em;
	   width:22em;
  }
  #Txtstyle2[type=text]:focus, textarea:focus {         
      box-shadow: 0 0 20px #F00;         
      border: 2px solid #F00;         
  }
    </style>


</head>

<body>


<div class= "container-fluid">
<div class="row">
<div class="col-sm-3"></div>

<div class="col-sm-6"><center>
<img src="images/crypto.jpg" width="200" style="margin-top:0.5em" />
</center>	
</div>

<div class="col-sm-3"></div>



</div>
    <div class="row">
    <div class="col-sm-2"></div>
    <div class="col-sm-8" align="center">
    <br /><b style=" color:white;  font-family:Oswald, Helvetica, sans-serif;  font-weight:600; letter-spacing:1px; text-shadow:  rgba(0,0,0,0.2); font-size:2.5em">"HOW TO MAKE MONEY WITH CLOUD COVER EIGHT INCOME STREAMS WITH ONLINE LEADS FROM TARGETED TRAFFIC WITH KOEL COIN"</b>
   </div>
 
  <div class="col-sm-2"></div>
  
  
   </div>
   <div class="row">
   <div class="col-sm-3"></div>
   <div class="col-sm-6">
   <p style="color:#FFF; font-size:2em; text-align:center "><strong><br />Enter your details below to learn more!</strong></p>
</div>
<div class="col-sm-3"></div>
</div>

   <br />
 <div class="row">

<center>


  
    <input type = "text"   id = "Txtstyle2" placeholder="Enter Your REAL Phone No. Here..." />
    
   </center>
    </div>
<div class="row">
<br />
    <center>
    <input type = "text"   id = "Txtstyle2" placeholder="Enter Your REAL Email Here..." />
   
  
   </center></div>
    
<div class="row">

   <br /><br /> <center>
   <a href="koelcointraining.html">
   <input type="button" class="button"   value="GET INSTANT ACCESS NOW" />
								
</a></center>
</div>
    
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-5d874e55-2b95-4c48-a904-f4e3b97a45ab"></div>


<br /><br /><br /><br /><br /><br />


</div>
</body></html>

Saturday, August 15, 2020 4:50 AM

Answers

User-939850651 posted

Hi sanam13,

According to your description, I think you are trying to add a suitable icon to the end of the input box.

Something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CRYPTOCONTRACTS.UK</title>
    <meta http-equiv="Content-Type" content="text/html" />
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=1" />
    <!--<link href="bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="bootstrap-theme.min.css" type="text/css" rel="stylesheet" />-->
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />

    <style>
        .phone input {
            background-image: url(img/phone-call.png);
            display: inline-block;
            background-size: 43.59px;
            background-repeat: no-repeat;
            background-% 50%;
            vertical-align: middle;
        }

        .email input {
            background-image: url(img/email.png);
            display: inline-block;
            background-size: 43.59px;
            background-repeat: no-repeat;
            background-% 50%;
            vertical-align: middle;
        }

        .container-fluid {
            background-color: #000;
            width: 100%;
        }

        .button {
            background-color: #1c87c9;
            -webkit-border-radius: 60px;
            border-radius: 6px;
            border: none;
            color: #eeeeee;
            cursor: pointer;
            font-family: sans-serif;
            font-size: 19px;
            padding: 10px 10px;
            text-align: center;
            text-decoration: blink;
        }

        @keyframes glowing {
            0% {
                background-color: #F00;
                box-shadow: 0 0 10px #F00;
            }

            50% {
                background-color: #F00;
                box-shadow: 0 0 35px #F00;
            }

            100% {
                background-color: #F00;
                box-shadow: 0 0 10px #F00;
            }
        }

        .button {
            animation: glowing 1000ms infinite;
        }

        #Txtstyle2[type=text], textarea {
            transition: all 0.30s ease-in-out;
            outline: #F00;
            border: 2px solid #F00;
            padding: 0.7em;
            width: 22em;
        }

            #Txtstyle2[type=text]:focus, textarea:focus {
                box-shadow: 0 0 20px #F00;
                border: 2px solid #F00;
            }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3"></div>

            <div class="col-sm-6">
                <center>
                    <img src="images/crypto.jpg" width="200" style="margin-top:0.5em" />
                </center>
            </div>

            <div class="col-sm-3"></div>
        </div>
        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8" align="center">
                <br /><b style=" color:white;  font-family:Oswald, Helvetica, sans-serif;  font-weight:600; letter-spacing:1px; text-shadow:  rgba(0,0,0,0.2); font-size:2.5em">"HOW TO MAKE MONEY WITH CLOUD COVER EIGHT INCOME STREAMS WITH ONLINE LEADS FROM TARGETED TRAFFIC WITH KOEL COIN"</b>
            </div>

            <div class="col-sm-2"></div>

        </div>
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <p style="color:#FFF; font-size:2em; text-align:center "><strong><br />Enter your details below to learn more!</strong></p>
            </div>
            <div class="col-sm-3"></div>
        </div>

        <br />
        <div class="row phone">
            <center>
                <input type="text" id="Txtstyle2" placeholder="Enter Your REAL Phone No. Here..." />
            </center>
        </div>
        <div class="row email">
            <br />
            <center>
                <input type="text" id="Txtstyle2" placeholder="Enter Your REAL Email Here..." />
            </center>
        </div>

        <div class="row">
            <br /><br /> <center>
                <a href="koelcointraining.html">
                    <input type="button" class="button" value="GET INSTANT ACCESS NOW" />
                </a>
            </center>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script src="https://apps.elfsight.com/p/platform.js" defer></script>
        <div class="elfsight-app-5d874e55-2b95-4c48-a904-f4e3b97a45ab"></div>
        <br /><br /><br /><br /><br /><br />
    </div>
</body>
</html>

Result:

Here are two icon image link:

phone: https://i.stack.imgur.com/aP0nh.png

email: https://i.stack.imgur.com/p4bEi.png

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, August 17, 2020 2:26 AM

Answered by:

want to insert image under textbox at the end?

Question

Answers