homepage Welcome to WebmasterWorld Guest from 54.205.236.46
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

    
Removing the bevel edge on FORM elements in Opera
ShawnR




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

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




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

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




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

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




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

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Opera Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved