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

Change the style of an INPUT BOX

Hi,

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 {
border:none;
}

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?

Thanks

-ws
0
Westside2004
Asked:
Westside2004
1 Solution
 
jrramCommented:
Try this...

<html>

<head>
<title>Toggle Form Field Editability</title>
<style>

.noedit{ border-width: 0px; }

</style>
</head>

<body>

<script language="">
function makeedit()
{
      document.form1.input1.className="";
      document.form1.input1.disabled=false;
}

function makenoedit()
{
      document.form1.input1.className="noedit";
      document.form1.input1.disabled=true;
}
</script>

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

</body>

</html>
0
 
JeffHowdenCommented:
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;
}
0

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