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