Change the style of an INPUT BOX

Posted on 2006-04-05
Last Modified: 2012-05-05

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?


Question by:Westside2004
    LVL 13

    Expert Comment

    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>


    LVL 7

    Accepted Solution

    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

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    Suggested Solutions

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now