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

Share with your friends!

මේ 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 එක හදාගන්න ඕන.

[code language=”html”]
<input type="text" placeholder="Enter your text"/>
[/code]

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

[code language=”css”]
input{
padding:10px;
padding-left:33px;
}
[/code]

input-f-0

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

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

[code language=”css”]
input{
background: url(img.png) no-repeat scroll 7px 7px;
padding:10px;
padding-left:33px;
}
[/code]

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

input-f

 

 

Share with your friends!

1 comment

Leave A Comment

shares