Hindi, asked by madhukargyanendra, 8 months ago

2. nidar ka bhavvachak ​

Answers

Answered by deepsen640
1

&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br /><br />&lt;head&gt;<br /><br />&lt;style&gt; <br /><br />&lt;!-- This is for Padded field --&gt;<br /><br />input[type=text] {<br />    width: 100%;<br />    padding: 12px 20px;<br />    margin: 8px 0;<br />    box-sizing: border-box;<br />}<br /><br />&lt;!-- This is for Bordered Field --&gt;<br /><br />input[type=text1] {<br />width: 100%;<br />padding: 12px 20px;<br />margin: 8px 0;<br />box-sizing: border-box;<br />border: 4px solid steelblue;<br />border-radius: 4px;<br />}<br /><br /><br />&lt;!-- This is for image Field --&gt;<br /><br /><br />input[type=text2] {<br />width: 100%;<br />box-sizing: border-box;<br />border: 2px solid #ccc;<br />border-radius: 4px;<br />font-size: 16px;<br />background-color: white;<br />background-image: url<br />('sicon.png');<br />background-position: 10px 10px; <br />background-repeat: no-repeat;<br />padding: 12px 20px 12px 40px;<br />}<br /><br /><br />&lt;!-- This is for Animated Field --&gt;<br /><br /><br />input[type=text3] {<br /><br />width: 130px;<br />box-sizing: border-box;<br />border: 3px solid steelblue;<br />border-radius: 4px;<br />font-size: 16px;<br />background-color: white;<br />background-image: url('sicon.png');<br />background-position: 10px 10px; <br />background-repeat: no-repeat;<br />padding: 12px 20px 12px 40px;<br />-webkit-transition: width 0.4s <br />ease-in-out;<br />transition: width 0.4s ease-in-out;<br />}<br /><br />input[type=text3]:focus {<br />    width: 60%;<br />}<br /><br />&lt;/style&gt;<br /><br />&lt;/head&gt;<br /><br />&lt;body&gt;<br /><br />&lt;h3&gt;Padded Text fields:&lt;/h3&gt;<br /><br />&lt;form&gt;<br /><br />&lt;label for="fname"&gt;First Name<br />&lt;/label&gt;<br />&lt;input type="text" id="fname" <br />name="fname"&gt;<br />&lt;label for="fname"&gt;Last Name&lt;/label&gt;<br />&lt;input type="text" id="lname" <br />name="lname"&gt;<br /><br />&lt;/form&gt;<br /><br /><br /><br /><br />&lt;h3&gt; Bordered Text Fields&lt;/h3&gt;<br /><br /><br /><br />&lt;form&gt; <br /><br />&lt;label for="fname"&gt;First Name&lt;/label&gt;<br />&lt;input type="text1" id="fname" <br />name="fname"&gt;<br />&lt;label for="lname"&gt;Last Name&lt;/label&gt;<br />&lt;input type="text1" id="lname" <br />name="lname"&gt;<br /><br />&lt;/form&gt;<br /><br /><br /><br />&lt;h3&gt;Text Fields with icon/image &lt;/h3&gt;<br /><br />&lt;form&gt;<br /><br />&lt;input type="text2" name="search" <br />placeholder="Search.."&gt;<br /><br />&lt;/form&gt;<br /><br /><br /><br /><br />&lt;h3&gt; Animated Text Field &lt;/h3&gt;<br /><br /><br />&lt;form&gt;<br /><br />  &lt;input type="text3" name="search" <br />placeholder="Search.."&gt;<br /><br />&lt;/form&gt;<br /><br /><br /><br /><br /><br /><br />&lt;/body&gt;<br />&lt;/html&gt;
Similar questions