Jump to content

Google Dropdown Border


koolx
 Share

Recommended Posts

Hi guys.. I use firefox and win 10. I cant color the border of the drop down in google's metric conversion page. Everytime I hover away from the border to see what the element is in inspector, the element disappears and its info also. It happens with some elements. Wish there were a way to freeze these types of elements. Anyway heres the link to that google page:
https://www.google.com/search?q=cm+to+inches&ie=utf-8&oe=utf-8&client=firefox-b-ab

 

Is there a way to freeze certain elements that have a knack of disappearing when you hover away from them?

Link to comment
Share on other sites

Select the element in question from developer console, then where the css is displayed there should be a dropdown style of :hover, :focus etc, select :hover and the border should appear as being hovered over, and the css should show as well for hover state.

Edited by dsonesuk
Link to comment
Share on other sites

10 hours ago, dsonesuk said:

Select the element in question from developer console, then where the css is displayed there should be a dropdown style of :hover, :focus etc, select :hover and the border should appear as being hovered over, and the css should show as well for hover state.

As I said the element disappears as soon as I move my mouse from it. So inspector fails to pick up what code it is as a result.

Link to comment
Share on other sites

You should be more clearer, the element does not disappear, the option listing if that is what you are referring to? is part of the select element, so it does not disappear, that is why i thought you were referring to border changing on hover. To see the full option list, click the select element, then hit edit, add a attribute of size="20" for example, and the list will now show.

Note: There is not much you can do with options from select dropdown. Usually these are converted to a customized dropdown using ul, li elements because this is easier to style, then JavaScript is used to gather the li selected content to insert into hidden select element OR  just hidden input.

Link to comment
Share on other sites

10 minutes ago, dsonesuk said:

You should be more clearer, the element does not disappear, the option listing if that is what you are referring to? is part of the select element, so it does not disappear, that is why i thought you were referring to border changing on hover. To see the full option list, click the select element, then hit edit, add a attribute of size="20" for example, and the list will now show.

Note: There is not much you can do with options from select dropdown. Usually these are converted to a customized dropdown using ul, li elements because this is easier to style, then JavaScript is used to gather the li selected content to insert into hidden select element OR  just hidden input.

I said the element DISAPPEARS: "the element disappears and its info also." This is what I said in the beginning and I cant be more clear than this is, as this is clear as day.

Youre having a very hard time understanding. AGAIN I CANNOT select the element as you would want me to because it DISAPPEARS as soon as I HOVER AWAY from it.

 

 

 

 

Link to comment
Share on other sites

1 minute ago, dsonesuk said:

I'm using windows 10, and Firefox, your link shows select dropdown form elements for 'Length', 'Centimetre' and 'Inch', are you saying these are disappearing?

No, just the drop down list disappears when I hover from it as I check what it is in inspector. This occurs with some elements that disappear when you check what they are in inspector. As soon as you select the element and hover from it to inspector to inspect it, it disppaers. How can I find this element or freeze the element from disappearing?

Link to comment
Share on other sites

Like I said the select dropdown and the dropdown list ((option elements) - which is much more clearer) are the same, you can't have one without the other, to say the ELEMENT disappears, means to me the whole select + option listing disappeared which don't make sense!

So , the select element we have established that is visible with value 'length', has to be inspected, then you should have an option to 'Edit', click that! edit the select element so it has an attribute of size="5", click 'Edit' again to exit. You should now be able to see part of the menu displaying 5 of the options listing, now you can inspect.

OR

Where the listing of css styles are applied to inspected elements, there should also be a 'DOM' tab. Select this and from the options make sure 'Show DOM properties is ticked. When you are inspecting the 'select' element, it will show attributes available to that element. Look for 'size' and add 5 to column on the right of it.

There is no one set way of showing hidden elements, it depends on what type of element, and how its hidden.

Edited by dsonesuk
Alternative way to add 'size' attribute and value to select element
Link to comment
Share on other sites

3 hours ago, dsonesuk said:

Like I said the select dropdown and the dropdown list ((option elements) - which is much more clearer) are the same, you can't have one without the other, to say the ELEMENT disappears, means to me the whole select + option listing disappeared which don't make sense!

So , the select element we have established that is visible with value 'length', has to be inspected, then you should have an option to 'Edit', click that! edit the select element so it has an attribute of size="5", click 'Edit' again to exit. You should now be able to see part of the menu displaying 5 of the options listing, now you can inspect.

OR

Where the listing of css styles are applied to inspected elements, there should also be a 'DOM' tab. Select this and from the options make sure 'Show DOM properties is ticked. When you are inspecting the 'select' element, it will show attributes available to that element. Look for 'size' and add 5 to column on the right of it.

There is no one set way of showing hidden elements, it depends on what type of element, and how its hidden.

The dropdown list disappears when you hover your mouse from it to try to find out what it is in inspector. You cant get more clearer than this.

As I said a bunch of times, theres no way of inspecting the dropdown element cuz AS SOON AS YOU MOVE YOUR MOUSE AWAY FROM IT TO THE INSPECTOR TOOL TO ATTEMPT TO FIND OUT WHAT IT IS IT D-I-S-A-P-P-E-A-R-S.

Theres no dom tool in inspector. Everyone who knows css knows there isnt one.

Think I'll start a new thread. You dont know css at all.

 

Link to comment
Share on other sites

My GOD! AAAARRRGGHH!

YES! THE OPTION ELEMENTS LISTING DISAPPEARS, BUT! BEING PART OF THE VISIBLE ELEMENT IE FOR INSTANCE THE SELECT ELEMENT WITH TEXT ‘LENGTH' YOU CAN! ACCESS! THE! DROPDOWN! THROUGH! THAT!

THEN BY EDITING HOW I HAVE MENTIONED SEVERAL TIMES NOW! YOU WILL SEE THE OPTIONS LISTING, AND BE ABLE TO USE THE INSPECTOR ON IT!

If you can't find 'Edit' or 'DOM', I suggest you look for tutorial on how to use web development tools in browsers.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...