My replies within yours below. Best,
Karl DeSaulniers Design Drumm http://designdrumm.com > On Jun 20, 2017, at 7:17 AM, Philippe Wittenbergh <e...@l-c-n.com> wrote: > > >> On Jun 20, 2017, at 7:05 PM, Karl DeSaulniers <k...@designdrumm.com> wrote: >> >> I chose to go with -*-appearance: unset; because I am able to turn it back >> on say on an individual page. >> With !important, I have to override and override and override and can't just >> simply remove the !important. >> Well, not that I have found. >> >> Is there a way to remove original !important statements from an element >> without using !important? > > 1. Did you know that for input[submit] or [button] you can completely remove > the native appearance by simply specifying a gradient-image as background - > no need for -webkit-appearance:none; ? At least on iOS 8-9-10 not sure about > Android blink based browsers. No need for !important. > > [type="submit"] { background: linear-gradient(#ccc,#ccc); } > > That doesn’t fully work for select radio-buttons or checkboxes unfortunately > ( the gradient is there but there is still the native texture). I have a gradient for my input[submit] input[reset] and input[button] and it did not completely remove the native appearance for my purpose. The borders and the shape still stayed. Safari was putting -webkit-appearance:buttonface on mine and that didn't look too good. So when I saw that it was applying -webkit-appearance, I looked into how to remove and came up with -webkit-appearance:unset (I didn't see a setting for -webkit-appearnace:none in the spec). This removed the shape, background, borders and anything else set by -webkit-appearance and allowed me full access. (I was making a submit button with one side round an the other square) > > 2. You _can_ override the !important by upping the specificity > > E { property: value !important} > body E { property: other-value !important} This is exactly what I want to avoid. > > 3. For form controls, I vastly prefer using the appearance property, as it > clearly indicates what you are doing (intent: remove the native > look-and-feel) and it avoids using !important. Using 'none' or 'unset' is up > to you, the end result is the same, and * the computed value is the same in > both cases *: *-appearance: none. Again, I didn't see a -webkit-appearance:none in the specs. I may have looked right past it. Not sure. > > 4. While reviewing some of my form-controls snippets yesterday, I noticed > that Edge (at least v15, but probably older as well) fully recognises the > -webkit-appearance property – and it works the same as with Safari / Blink. Well that is good to know. Thank you. > > 5. On the subject of Edge (and IE 11): > - select widgets: https://msdn.microsoft.com/library/Hh771821 > - radio / checkbox: https://msdn.microsoft.com/en-us/library/hh771816 > - input[type=file]: > https://msdn.microsoft.com/en-us/library/windows/apps/hh779844.aspx > https://msdn.microsoft.com/en-us/library/windows/apps/hh465820.aspx > > Have fun with those. I have NEVER had fun with IE... (: /) But thanks for the links! (: )) > > > Philippe > -- > Philippe Wittenbergh > https://l-c-n.com/ Best, Karl ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
