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

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.

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.

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%)

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

what context want to use input ?

@jml6m

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

@fchiumeo

@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

@mdo

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

So?

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

@tagliala

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.

@zdroid

@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/

@zdroid

kk

2013/8/28 Geremia Taglialatela notifications@github.com

@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

@tagliala

@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?

@jml6m

@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)

fix #10252 by restricting Android Firefox reset to only .form-control…

Confirmed on Win FF23

No further confirmation is necessary!

Merge pull request #10265 from twbs/fix-10252

(less) fix twbs#10252 by restricting Android Firefox reset to only .f…

~~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.

(less) fix twbs#10252 by restricting Android Firefox reset to only .f…

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

fchiumeo commented on Aug 28, 2013

jml6m commented on Aug 28, 2013

fchiumeo commented on Aug 28, 2013

cvrebert commented on Aug 28, 2013

jml6m commented on Aug 28, 2013

cvrebert commented on Aug 28, 2013

tagliala commented on Aug 28, 2013

zlatanvasovic commented on Aug 28, 2013

tagliala commented on Aug 28, 2013

zlatanvasovic commented on Aug 28, 2013

jml6m commented on Aug 28, 2013

tagliala commented on Aug 28, 2013

Merg1255 commented on Aug 29, 2013

cvrebert commented on Aug 30, 2013

alenb commented on Sep 16, 2014

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions