CSS question - transparent underlined textbox - howto?


Tags: css,textbox,styles

Problem :

Good Morning,

Quick CSS question. Does anyone know any quick css to make an underlined transparent textbox? I basically want the textbox to be invisible except for the bottom border. I need it to function normally. Do I just remove left, right, and top borders and set it's background to transparent or something? Any examples of how to properly accomplish this? This app is for IE7 if that's relevant. Any help is always appreciated.

Cheers, ~ck in San Diego



Solution :

This should do it:

input.myBox
{
    border: 0px solid #000000;
    border-bottom-width: 1px;
    background-color: transparent;
}

Tested in IE8 (IE7 compatability mode)


    CSS Howto..

    how to make a box of nxn given in a url?

    How do I make an erasing animation in CSS? [closed]

    How to display line items in twos?

    CSS: How to clear a floating object only one level, not the all the way to the left?

    How do I Add border to text in inputfield

    how to get the height of a div with overflow:auto property set in css

    How to set class on div that is inside of repeater in code behind?

    jQuery how to select children first level div's

    How could I have an iframe that shows the target page and all it's elements at 50% scale?

    how to fix the button so that they don't scroll with contents

    When I try to print a page I created using jQuery Mobile, it always prints an extra blank page. How can I stop this?

    How to place the block on the top of “second” screen using CSS?

    How to display 'fit' image in CSS or HTML?

    How do I get Jquery to toggle display

    How to create border corner spacing in CSS

    How to keep an image and text (vmax font) aligned when resizing browser?

    Bootstrap with Picture Slideshow

    CSS Mega Menus: How to target ul's except those in divs

    Option element bigger than select box - how to get the options list to expand to the left?

    Ionic Side Menu Not Showing Content

    How to get the child of a parent div element

    javascript/jquery - how to get the width of an element / css class that hasn't been added to dom yet

    How to proper align after CSS column-count

    CSS: How to crop image that has any size?

    Fade in/out text slideshow

    Basic CSS: When applying effects to images in CSS, how do you exclude the banner image?

    CSS: how to make children fit parent's width

    CSS: How to shadow a field like this? [closed]

    How to make sidebar horizontal for xs devices

    How can I get a block to print complicated divs horizontally?