首页 > web前端 > html教程 > input输入框如何去除边框和修改背景色_html/css_WEB-ITnose

input输入框如何去除边框和修改背景色_html/css_WEB-ITnose

不言
发布: 2018-05-18 17:20:16
原创
10990 人浏览过

<body> 
 <table> 
 <tr> 
 <td> 
 <input type="text" value="不如意十八九" > 
 </td> 
 </tr> 
 </table> 
 </body>
登录后复制

因为编辑和预览界面共用一个,考虑使用样式进行区分,上面代码要以下的结果:

<body> 
 <table> 
 <tr> 
 <td> 
 不如意十八九 
 </td> 
 </tr> 
 </table> 
 </body>
登录后复制

请问各位能否实现

回复讨论(解决方案)

<input type="text" value="不如意十八九" style="border:0px;">
登录后复制

用css就能实现
定义一个class,然后定义边框 none,背景色
不就好了

<input type="text" style="border:0px;background-color:blue" value="不如意十八九" >
<input type="text" style="border:0px;background-color:blue" value="不如意十八九" >
登录后复制

+1

input{ border-style:none; background-color:#FF9;}
登录后复制

看了下问题,是不是在问JS效果如何实现?

<body> 
 <table> 
 <tr> 
 <td id="box"> 
 <input type="text" value="不如意十八九" id="myinput" > 
 <button onclick="clicked()">click me</button> 
 </td> 
 </tr> 
 </table> 
 </body> 

------------------ 
<script>function clicked(){
var user_val = document.getElementById("myinput").value;document.getElementById("box").innerHTML = user_val;
}</script>
登录后复制

没有边框都是border:0px;背景色background-color:#fef;


 


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板