Default behavior of inputs are not coming when CSS image is removed

[shmdhussain]

When the CSS sprite images(responsible for the background for inputs) are not available or i just removed the CSS sprite image, then the default behavior of the browser for the inputs(select, input) is not coming, i just see the text alone, i am able to recreate this issue in the demo html provided in the GIT. PFA Screenshot.

I understand this is because of the opacity which is turned off to zero by css. Is there any way to overcome this issue?

Expected behavior: When i remove CSS background images or when CSS sprite background image is not available due to network issue, my page should take the default behavior of the browser,

Before issue:

After Issue:

[fidian]

You have a valid concern but I am curious about how one would implement
this.

The images are background images and will always be underneath the input
element, which is why they are transparent. Their sizes are also
stretched/changed to fit the styling. A second wrinkle is that the sliding
window approach doesn't require that a background image is specified at all

• it is entirely possible to style the elements using a custom CSS that
  uses background colors, gradients or other techniques to visually indicate
  that there is a control for the user to use. The whole element might be
  wrapped in another div whose background is the right image, and it would
  work fine as long as the content was sized correctly.

If this is supposed to fall back to the browser's default controls, then I
am at a loss for the mechanism where I'd determine if the image was loaded
for the oddball scenarios. What do you propose?

Tyler Akins

On Tue, Oct 14, 2014 at 4:31 PM, Mohamed Hussain S H <
[email protected]> wrote:

When the CSS sprite images(responsible for the background for inputs) are
not available or i just removed the CSS sprite image, then the default
behavior of the browser for the inputs(select, input) is not coming, i just
see the text alone, i am able to recreate this issue in the demo html
provided in the GIT. PFA Screenshot.

I understand this is because of the opacity which is turned off to zero by
css. Is there any way to overcome this issue?

Expected behavior: When i remove CSS background images or when CSS sprite
background image is not available due to network issue, my page should take
the default behavior of the browser,

Before issue:
[image: image]
https://cloud.githubusercontent.com/assets/4039657/4631649/1664d3ac-53b7-11e4-9e93-7aba24437bd4.png

After Issue:
[image: image]
https://cloud.githubusercontent.com/assets/4039657/4631631/02617c70-53b7-11e4-88d4-ed8c18181cbf.png

—
Reply to this email directly or view it on GitHub
#412.

[shmdhussain]

appreciate you for your quick response.
Is it possible to test the image is available path? I think it is possible by using jquery AJAX method. But my concern suppose if the browser is not accepting the background image for visually challenged user's browser/screen reader then is it possible to turn back to browser default.

[fidian]

AJAX might be blocked. If the image is on a different domain (like a CDN
or a static file server) and they don't support CORS then we have an
extremely difficult time determining if the image would load. An image
object could be used if we can find an image URL, but what about scenarios
where the image is added to a wrapper? We can't just say "if there is
nothing showing then show something." :-(

There are ways to test if the browser is in high contrast mode and, if I
remember right, Unifrom will disable itself. Maybe not with version 2, but
it does with the rewrite I've been working on.

Tyler Akins

On Tue, Oct 14, 2014 at 5:01 PM, Mohamed Hussain S H <
[email protected]> wrote:

appreciate you for your quick response.
Is it possible to test the image is available path? I think it is possible
by using jquery AJAX method. But my concern suppose if the browser is not
accepting the background image for visually challenged user's
browser/screen reader then is it possible to turn back to browser default.

—
Reply to this email directly or view it on GitHub
#412 (comment).

[shmdhussain]

Thanks Fidian. I understand the difficulty in implementing it. But my requirement is when the page loading is slow or page load has been stopped at that time the sprite is not loaded then the user is not going to see the radio or drop-down is there.