html如何设置input的无边框效果

CSS可以控制的
<style type="text/css">
input {border:1px solid #c00;}
input {star : expression(
onmouseover=function(){this.style.borderColor="#060"},
onmouseout=function(){this.style.borderColor="#c00"})}
</style>

CSS
<style type="text/css">
input
{
  border-top:0px ;
  border-left:0px ;
  border-right:0px ;
}
</style>

CSS就好比穿上一件漂亮的衣服，起到装饰效果

在 CSS 中使用 IE 中特有的 expression 是很不好的做法，因为这种方式只有 IE 支持，其他浏览器不能支持这种方式。<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <title>试试</title>
</head><script type="text/javascript">
function chanageBackColor(tag) {
  var txts = document.getElementsByTagName(tag);
  for(var i = 0; i < txts.length; i++) {
    if(tag == 'input' && txts[i].type != 'text') {
      continue;
    }
    txts[i].isfocus = false;
    txts[i].onmouseover = function() {
      this.style.backgroundColor = '#fffacd';
    }
    txts[i].onfocus = function() {
      this.isfocus = true;
      this.style.backgroundColor = '#fffacd';
      this.style.borderColor = 'red';
    }
    txts[i].onmouseout = function() {
      if(!this.isfocus) {
        this.style.backgroundColor = '#ffffff';
      }
    }
    txts[i].onblur = function() {
      this.style.backgroundColor = '#ffffff';
      this.style.borderColor = '#c0c0c0';
      this.isfocus = false;
    }
  }
}window.onload = function() {
  chanageBackColor('input');
  chanageBackColor('textarea');
}
</script><style type="text/css">
form table {
  font-size: 10pt;
}
form table td.top {
  vertical-align: top;
}
form table td.td-r {
  text-align: right;
}
input.txt {
  width: 300px;
  border: 1px solid #c0c0c0;
  padding: 2px 2px;
}
textarea {
  font-size: 10pt;
  height: 100px;
  width: 300px;
  border: 1px solid #c0c0c0;
  overflow-y: auto;
  padding: 2px;
}
</style><body>
<form name="frm" method="post" action="#" onsubmit="return checkMobile();">
  <table>
    <tr>
      <td class="td-r">姓名：</td>
      <td><input type="text" name="name" class="txt"></td>
    </tr>
    <tr>
      <td class="td-r">主页：</td>
      <td><input type="text" name="page" class="txt"></td>
    </tr>
    <tr>
      <td class="td-r">验证码：</td>
      <td><input type="text" name="code" class="txt"></td>
    </tr>
    <tr>
      <td class="td-r top">内容：</td>
      <td><textarea name="comment"></textarea></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" value="确定"></td>
    </tr>
  </table>
</form>
</body>
</html>

无边框Input:<input type="text" style="border:1px;border-bottom-style:none;border-top-style:none;border-left-style:none;border-right-style:none;">

调试易

html如何设置input的无边框效果

解决方案 »