Jump to content
Stef's Coding Community
newseed

Select/Option Dropdown Background

Recommended Posts

I believe most of us here do not like tinkering or overriding any user's browser's settings or controls but this client is very persistant to find a solution.

 

co lourm all.com/store/pc/LaCie-526-26-LCD-Monitor-23p39.htm (remove spaces)

 

If you look at the "Calibrators:" drop down menu, it's all grey with white text. That is fine. This issue is that when you hover over a option/choice it gives it a blue background or whatever background color your browser is set for. He doesn't like the blue background but instead he would rather have it changes to another color. Controlling the text color would be nice too.

 

I have not found a solution to this and so I thought that maybe there is a javascript method that will allow this kind of control.

 

Any suggestions or source that might be helpful to solve this issue?

 

Thanks.

Share this post


Link to post
Share on other sites

Ya know... it only "looks" blue in comparison to the brownish background color. If you change the select background to white then it just looks like a grayish color. Which does not look nearly as bad (in my opinion).

Share this post


Link to post
Share on other sites
Ya know... it only "looks" blue in comparison to the brownish background color. If you change the select background to white then it just looks like a grayish color. Which does not look nearly as bad (in my opinion).

Valid point. Quite frankly, I don't like toying with this but if the client is going to pay you and it doesn't go against your moral values or hurt your business reputation then I am going to deliver what they request if at all possible.

 

I've downloaded the tar.gz file three times but it seems to be corrupted when I try to open it via WinZip. Can you download it and see if you get the same results? If not, can you extract the file and then zip it and send to me or upload to your site and provide a link to download it?

 

Thanks.

Edited by newseed

Share this post


Link to post
Share on other sites

The jqTransform is nice but it doesn't render consistantly between IE and FF. If you look at the demo that came with the script you will see that the first two input boxes have a certain width in FF but it's much wider in IE.

 

I haven't figured out how to set certain widths for certain locations. For instant, I may have a search input box that can be 150px wide but then I have a quantity input box that only needs to be 40px wide.

 

Here's what I have done so far:

 

col ourm all.com/store/pc/0-test-form.htm

Share this post


Link to post
Share on other sites

I checked your page.

 

When You're calling the script:

$(function(){
   $('form').jqTransform({imgPath:'jqtransformplugin/img/'});
});

 

You're applying jqTransform to ALL the forms on that page. But you can target specific forms using:

 

$(function(){

$('form[name=myFormName]').jqTransform({imgPath:'jqtransformplugin/img/'});

});

 

 

 

Also that demo page hasn't set a width to the text boxes (in the CSS), or a length property on the input. So Firefox and IE assume different lengths. If you do:

 


 

and using CSS you can style the class "textbox"

 


 

Then i'm assuming the widths will be consisten on browsers. :rolleyes:

Share this post


Link to post
Share on other sites

The problem is that there are two different forms on the same page. I am not seeing how I can isolate one from the other.

 

Also, I have update the demo in which I have a inline style width of 30px set for the Qty. box (just below the select/option dropdown). It behaves nicely in FX but not in IE. IE doesn't change at all.

 

Update: I have since change the input width via the script which changes the width for IE and left FX alone. However, the alignment is still not correct for the text entered. Additionally, I prefer to control the width exclusively by CSS.

Edited by newseed

Share this post


Link to post
Share on other sites

You can see that when jqTransform is called, the actual form boxes are hidden and instead, there's replacement items created by jqTransform.

 

you can target this class by CSS to style the textbox width in both FF and IE:

 

div.jqTransformSelectWrapper {

width: ;

}

 

and text:

 

div.jqTransformInputWrapper

Share this post


Link to post
Share on other sites
div.jqTransformInputWrapper

The problem I have is that I have two forms on one page each having a input field. These two input fields require to be different widths. Since the script uses the same class, I cannot dictate these two inputs to be of different width values.

Share this post


Link to post
Share on other sites
The problem I have is that I have two forms on one page each having a input field. These two input fields require to be different widths. Since the script uses the same class, I cannot dictate these two inputs to be of different width values.

 

If you still haven't figured out your problem : Inline styles for the win :)

 

Apply jqTransform to both forms, then use jQuery to style those textboxes as soon as jqTransform finishes doing it's job.

 

$(function(){
   // jqTransform called here

   // change the search box width using custom width
   var $searchWidth = "100px";
   $("form[name=jqsearch] div.jqTransformInputWrapper").css("width",$searchWidth);

   // change the quantity box width using custom width
   var $addItemWidth = "30px";
   $("form[name=addItem] div.jqTransformInputWrapper").css("width",$addItemWidth);
});

Share this post


Link to post
Share on other sites

Certainly an improvment. However, visually it varies between IE6, IE7, IE8 and FX. Haven't even checked it in Safari.

 

Check your PM.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...