当前位置：首页 → 问答吧 → 用css控制input样式

用css控制input样式

时间：2011-09-01

来源：互联网

如图:

1.上面的input要怎么用css来控制并达到这种效果?

2.下面是input是获得焦点后的效果不用js可以达到这种效果么? 用js修改border的话我知道怎么做

注:图片为放大后的效果~ 需要考虑浏览器兼容问题~~

作者: yorts52 发布时间: 2011-09-01

HTML code


<!DOCTYPE html>
<html>
    <head>
        <meta charset="gb2312" />
        <title>Test</title>
        <style>
            div { background:#d9d9d7; width:100px; padding:5px; }
            input { width:100px; height:20px; border:none; background:#ffffe3;}
        </style>

    </head>
    <body>
        <div id="div">
            <input type="text" id="test" />
        </div>
        <script>
            document.getElementById('test').onfocus = function(){
                document.getElementById('div').style.backgroundColor = '#ff9800'
            }
        </script>
    </body>
</html>