Add image into Text Input Field – Input Field Featured කරන හැටි – 1


මේ post එකේ විස්තර වෙන්නේ පහල තියන post series එකේම තවත් ලිපියක්.

Show/Hide Password – Password Field එක Featured කරන හැටි
Check Password Length – Password Field එක Featured කරන හැටි – 1

දැන් බලමු මේ post එකේ කියන්නේ මොකද්ද කියලා. web site වල පහල තියනවා වගේ input field දැකලා ඇති. ඒ වගේ input field එකක් code කරන විදිය තමයි මේකේ විස්තර වෙන්නේ.

මුලින්ම input field එක හදාගන්න ඕන.

<input type="text" placeholder="Enter your text"/>

දැන් මේකට style එකක් දාලා ලස්සන කරගමු.

input{
    padding:10px;
    padding-left:33px;
}

input-f-0

මෙතැනදී භාවිතා කරන්නේ 20px x 20px ප්‍රමාණයේ image එකක්. අවශ්‍ය කරන විදියේ image එකක් html page එක තියන folder එකට දාගන්න. padding-left එක 33px දීලා input field එකේ වම් පැත්තෙන් ඉඩ අරගෙන තියනවා.add කරන්න හදන image එක අනුව කැමති size එකක් දෙන්න. ඊටපස්සේ කරන්න ඕන image එක add කරගන්න එක.

css එක මේ විදියට වෙනස් කරගන්න ඕන.

input{
    background: url(img.png) no-repeat scroll 7px 7px;
    padding:10px;
    padding-left:33px;
}

මෙතන url එකට image එකේ පාත් එක දෙන්න. මේ තියෙන්නේ result එක.

input-f

 

 

Advertisements

One thought on “Add image into Text Input Field – Input Field Featured කරන හැටි – 1

  1. Pingback: User Login Form එකක Text Input Field එක Featured කරන හැටි – 1 | සතුටු වැස්ස බ්ලොග් කියවනය

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s