Question
Zensar Technologies Ltd
IN
Last activity: 20 Nov 2018 16:31 EST
Custom textbox with an image in the corner
Hello,
I am trying to create a custom text box with a image on the left corner, inside the text box boundary. Something like this.
Could somebody suggest how I can achieve this?
Thanks in advance.
Accepted Solution
Pegasystems Inc.
US
Hi Naman ,
You can use id attribute in the input textbox if you want to have different images for different textbox. Please find the attached screenshot .
To achieve this you can create a non auto generated section and paste the below code .
<div>
<input type="text" id="myImage1" />
<input type="text" id="myImage2" />
</div>
<style>
#myImage1{
background: floralwhite url("https://www.gstatic.com/webp/gallery/1.jpg") left no-repeat;
padding-left: 20px;
background-size: 20px 20px;
}
#myImage2{
margin-left:15px;
background: floralwhite url("https://www.gstatic.com/webp/gallery/3.jpg") left no-repeat;
padding-left: 20px;
background-size: 20px 20px;
}
</style>
Learning
IN
Hello ,
Kindly copy the below code in your userworkform :-
<style>
input[type=text] {
background: white url(urlofyourimage.jpg) left no-repeat;
padding-left: 17px;
background-size: 10px 10px;
}
</style>
Replace the URL in the background attribute as per your requirement.
Note:- It effects every text box in your application. Change input type text css selector as per your requirement.
Hope this helps.
Thanks,
Hari
Accepted Solution
Pegasystems Inc.
US
Hi Naman ,
You can use id attribute in the input textbox if you want to have different images for different textbox. Please find the attached screenshot .
To achieve this you can create a non auto generated section and paste the below code .
<div>
<input type="text" id="myImage1" />
<input type="text" id="myImage2" />
</div>
<style>
#myImage1{
background: floralwhite url("https://www.gstatic.com/webp/gallery/1.jpg") left no-repeat;
padding-left: 20px;
background-size: 20px 20px;
}
#myImage2{
margin-left:15px;
background: floralwhite url("https://www.gstatic.com/webp/gallery/3.jpg") left no-repeat;
padding-left: 20px;
background-size: 20px 20px;
}
</style>
