• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 158
  • Last Modified:

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?


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


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;

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now