Change the style of an INPUT BOX


I want to simulate the style, look and feel of the HTML input control <input>

I am trying to do this using css.  Does someone know how to write a css style that resembles the input control.

I have  style right now

.nonedit {

I have to basically have this field where i toggle, between edit and non edit mode, so I want to know how to do this, when I set border to none, its fine, but when i want to go to edit mode, border:solid; looks crazy and not how the original html input control looked before i removed the border in my nonedit style.

Can someone assist?


Who is Participating?
Changing border-width will result in that portion of your document reflowing.  Instead, try changing just border-style from inset to none and back:

.edit {
  border-style: inset;

.noedit {
  border-style: none;
Try this...


<title>Toggle Form Field Editability</title>

.noedit{ border-width: 0px; }



<script language="">
function makeedit()

function makenoedit()

<form method="POST" action="" name="form1">
  Input Field: <input type="text" name="input1" size="20" /></p>
  <p><input type="button" value="Make Editable" name="e" onclick="makeedit();" /><input type="button" value="Make Non-Editable" name="ne" onclick="makenoedit();" /></p>


Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.