css美化input文字框實現代碼

來源:互聯網
上載者:User
提示:您可以先修改部分代碼再運行

<div class="demo-container"><style type="text/css">input.txtInput{background:#fff;background-repeat:no-repeat;background-position:2px center;border:1pxsolid #999;padding:2px2px 2px 20px}input.searchInput{background-image:url(/blog/upload/image/20111201074152.gif)}input.commentInput{background-image:url(/blog/upload/image/20111201074123.gif)}input.borderInput{background-image:url(/blog/upload/image/20111201074051.gif);;background-repeat:no-repeat;background-position:left top;border:1pxsolid #d5dee9;padding:3px}</style><p><label for="keyword">搜尋:</label> <input class="txtInput searchInput" id="keyword" name="keyword" type="text" /></p><p><label for="comment">評論:</label> <input class="txtInput commentInput" id="comment" name="comment" type="text" /></p><p><label for="background">邊框:</label> <input class="borderInput" id="border" name="border" type="text" /></p></div></td> </tr></table>
提示:您可以先修改部分代碼再運行
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.