Welcome to WebmasterWorld Guest from 54.145.44.134

Forum Moderators: open

Message Too Old, No Replies

Removing the bevel edge on FORM elements in Opera

     

ShawnR

5:12 am on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi

First time poster, and just discovered this forum. Thanks for a great forum. Apologies if my query below has been covered previously (Is there any way to search the archives of this forum?).

And to my question: Anyone know how to:

(a) remove the browser's native bevel edges around form entities such as INPUT or SELECT.

and

(b) control the width of the form elements in Opera (Opera seems to ignore the 'width' css attribute.)

What I am trying to do is create a customised look and feel to my form by putting the INPUT tag in a <TD> table cell, with my own pictures (drop-shadows, etc) in adjacent cells.

I have had some success, using the code below. The INPUT boxes turn out exacly as I want with NN and IE, but not good with Opera. The SELECT boxes are not exactly what I want with NN and IE, although reasonably close (you see the browser's native form bevel edge inside my box. However, on Opera it looks really bad.

The following is the code I am using:

css styles:
-----------
input.shadowed {
border-style: none;
border-width: 0px;
border-color: #383838;
vertical-align: top;
width: 100%;
margin: 0px;
padding-left: 5px;
text-align: left;
}

SELECT.shadowed {
vertical-align: top;
border-style: none;
border-width: 0px;
border-color: white;
width: 100%;
margin: 0px;
padding-left: 5px;
text-align: left;
}

And the html:
-------------
<!-- start of drop-shadow box --> <table cellpadding=0 cellspacing=0 border=0" width="100%"><tr><td class="shadowed-element" width="100%">

<input class="shadowed" type="text" name="location" size="20" maxlength="25" value="Enter Location (optional)">

<!-- end of drop-shadow box --> </td><td class="shadow" width="2"><img src="pics/white-2x4.gif" width="2" height="4" border="0"></td></tr><tr><td class="shadow" width="2" height="4"><img src="pics/white-2x4.gif" width="2" height="4" border="0"></td><td class="shadow" height="4"><img src="pics/1pxinv.gif" width="2" border="0"></td></tr></table>

<!-- start of drop-shadow box --> <table cellpadding=0 cellspacing=0 border="0" width="100%"><tr><td class="shadowed-element" width="100%">

<select class="shadowed" name="num-results" size="1">
<option class="shadowed">Show 20 results
<option class="shadowed" selected>Show 50 results
<option class="shadowed">Show 100 results</select>

<!-- end of drop-shadow box --> </td><td class="shadow" width="2"><img src="pics/white-2x4.gif" width="2" height="4" border="0"></td></tr><tr><td class="shadow" width="2" height="4"><img src="pics/white-2x4.gif" width="2" height="4" border="0"></td><td class="shadow" height="4"><img src="pics/1pxinv.gif" width="2" border="0"></td></tr></table>

DrDoc

6:40 am on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome [webmasterworld.com] to Webmaster World!

You can search all the forums by clicking on the site search [webmasterworld.com] link towards the top of the page.

Now, to your question. Opera 6 doesn't allow you to change the border on form elements. In fact, it's a general problem that what works in one browser doesn't always work in the next. If possible, avoid styling the form elements...

Hester

10:51 am on Mar 27, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Opera 7 allows forms to be styled. It is buggy when displaying the width of option elements - sometimes they are correct, other times not.

ShawnR

12:41 am on Mar 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Dr Doc & Hester

Just a quick note to say thanks for the replies. They were very helpful.

Dr Doc, I take your point that styling the form elements is probably not good practice... I guess, like all of us, when I get a request from a client, my first reaction is "I'll try my hardest" and only go back with an "its not feasible" once I have given it a good bash, and asked for help from experienced people like you.

Again, thanks for the help!