Input box renders oddly in Firefox (offending CSS block identified)

[jml6m]

Here is a JSFiddle (open in Firefox): http://jsfiddle.net/aLaXs/

Notice the odd, ugly shadowing effect that's applied only in Firefox browsers. Offending CSS block is this:

button, input, select[multiple], textarea {
    background-image: none;
}

By disabling this effect using Firebug or similar software, the text box looks normal again. Is there a workaround for this? I'm trying to add other attributes to my style.css to counteract this effect, but nothing seems to be working. I've tried adding:

//in style.css
input {
    outline: 0;
    border: 0;
    background-image: initial;
}

None of them has worked. Text box looks normal in other browsers.

[fchiumeo]

add form-control to input

Bootstrap Doc

Individual form controls automatically receive some global styling. All textual , <textarea>, and elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

[jml6m]

That does work, but not necessarily efficient if I don't want the other style attributes that come with that (i.e. if I don't want width: 100%)

[fchiumeo]

if you set a col-[xs-sm-md-lg]-* to div ?

what context want to use input ?

[cvrebert]

That CSS fragment was added to fix #8702.
@jml6m Which OS are you using?

[jml6m]

@fchiumeo I use it in a variety of contexts, I don't want any of my inputs having the weird shadow effects
@cvrebert Windows 8 Pro 64-bit, Firefox 23.0.1 browser

[cvrebert]

Confirmed on Mac Firefox. Dammit Fennec!
/cc @mdo

[tagliala]

So?

background-image: none in form-control and btn?

[zlatanvasovic]

Use:

@media (max-width: @screen-sm-max) {
  button,
  input,
  select[multiple],
  textarea {
    background-image: none;
  }
}

instead of:

button,
input,
select[multiple],
textarea {
  background-image: none;
}

It'll just target mobile devices (phones and tablets), no desktop.

@tagliala No, .form-control is also for inputs.

[tagliala]

@zdroid I don't like your solution because it is based on screen size

It should be fine adding that property to form-control because this issue only happens in unstyled controls: http://jsfiddle.net/aLaXs/9/

[zlatanvasovic]

kk

2013/8/28 Geremia Taglialatela [email protected]

@zdroid https://github.com/ZDroid I don't like your solution because it
is based on resolution

It should be fine because this issue only happens in unstyled controls:
http://jsfiddle.net/aLaXs/9/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/10252#issuecomment-23441794
.

Zlatan Vasović - ZDroid

[jml6m]

@tagliala As I mentioned above, adding '.form-control' changes other CSS properties of the , which may not be desired. I get that it may not be best practice to exclude '.form-control', but surely there is a simpler solution?

[tagliala]

@jml6m I didn't say that, sorry

I mean... a solution could be remove

button, input, select[multiple], textarea {
    background-image: none;
}

and add background-image: none; to form-control, so unstyled form inputs will not be affected by this bug.

This solution was also suggested by necolas: necolas/normalize.css#214 (comment)

[Merg1255]

Confirmed on Win FF23

[cvrebert]

No further confirmation is necessary!

[alenb]

Hi all,

Has this issue been resolved at all? As it still persists in v3.2.0

---

Nvm, it seems adding padding creates a similar looking issue as the input control has a fixed height by default.