css圆⾓输⼊框
对应的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">input框禁止输入
Html代码
1. <html>
2. <head>
3. <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
4. <title>Insert title here</title>
5. <style type="text/css">
6.            input {
7.                border:0px;
8.                background-image:url(images/long-input.png);
9.                background-repeat:no-repeat;
10.                background-position-x:right;
11.                padding-left:3px;
12.                padding-right:3px;
13.                height:18px;
14.                font-size:11px;
15.                width:70px;
16.            }
17. </style>
18. </head>
19. <body>
20. <form>
21. <input value="Hellokitty"/>
22. </form>
23. </body>
24. </html>
实现思路如下：
1.使⽤border:0px；去掉input框默认的边框
2.制作⼀个圆⾓的输⼊框，并设定为input的背景图⽚并且设定background-repeat:no-repeat；以不让背景图⽚重复
3.由于是使⽤固定的背景制作圆⾓，因此需要设定固定的height:18px;font-size:11px;font-size:11px;
此时的效果图：
4.发现输⼊框中的内容压在了左边的背景图⽚上，因此使⽤padding-left:3px；使内容有⼀定的左边距padding-right:3px；同理
此时基本完成整个制作，但在IE下输⼊字符多的情况下出现:
也就是说当输⼊⽂字过多的时候，背景图⽚随着左移了，此时设置⼀个关键字属性background-position-x:right；就可已完成预期的效果了
总结：
使⽤背景图⽚制作圆⾓框实现机理简单，但是灵活性不⼤，因此对于那些需要改变宽⾼的圆⾓输⼊框来说只能制作多张图⽚，灵活性较差，但是对于不需要改变宽⾼，⼤⼩⼀致的圆⾓输⼊框来说，是⼀种简单有效的⽅式。
注释：直接在input⾥⾯设置样式，制作⼀个与之⼤⼩相同的⽂本框也可以实现，⽽且更加简单。
<td><input type="text" ></td>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。