Home >Web Front-end >HTML Tutorial >How to remove the border and modify the background color of the input input box_html/css_WEB-ITnose

How to remove the border and modify the background color of the input input box_html/css_WEB-ITnose

不言
不言Original
2018-05-18 17:20:1610995browse

<body> 
 <table> 
 <tr> 
 <td> 
 <input type="text" value="不如意十八九" > 
 </td> 
 </tr> 
 </table> 
 </body>

Because the editing and preview interfaces share the same interface, consider using styles to distinguish them. The above code should have the following results:

<body> 
 <table> 
 <tr> 
 <td> 
 不如意十八九 
 </td> 
 </tr> 
 </table> 
 </body>

Can you please implement it

Reply to the discussion (solution)

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

It can be achieved with css
Define a class, and then define the border none and the background color
Wouldn’t it be better

<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;}

After reading the question, are you asking how to achieve the JS effect?

<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>

No borders are border:0px; background-color: #fef;




Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn