Geek Answers Handbook

Webkit htm5 css reset for input elements

This is somewhat annoying. It seems that webkit (via chrome 13 canary) has the right to switch to styling various types of input, and it is mostly faced with design.

In particular, it causes me a headache:

  • selected glow of the element (through the path)
  • placeholder = text style
  • ugly glow around focused text fields and input fields

I use template and modernization.

A simple input[type=search] with a placeholder overrides the style of the text.

I know that you can configure it with

input::-webkit-input-placeholder

However, it doesn't seem to be able to style things like text-shadow - it's a little shit. Does anyone know if this could be a bug that will be fixed, or do I need to get back to a solution to replace javascript?

The search entry is displayed with white bg and removes the rounded corners defined in the CSS base class. I found the reset code:

 input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { display: none; } input[type=search] { /* the webkit overrides need to stay at the top */ -webkit-appearance: textfield; -webkit-box-sizing: content-box; /* your styles here */ }

and it helps.

Glow around shape elements that I fix by setting outline: none .

I assume that I am actually after this - this is a CSS reset that retrieves any predefined styles in the user agent stylesheet (according to the web inspector) that affect it. Is there a reset available that can do this, so even though the doctype is HTML5, the elements are displayed as simple as before HTML5, and do they follow implicit rules for them in basic CSS?

I am very sorry to say this, but despite all the memory problems and the slowness of the plugins, FireFox 4 really displays everything perfectly. Webkit should not try to style things for you, just provide an API that will allow you to do this if you want ...

+7
source share
5 answers

Good form reset style sheet (with some JS) Formalize .

Formalizes the reset of everything and how it works to provide consistent forms in browsers.

+5
source

Although this may require you to define an additional style, I usually post -webkit-appearance:none for most form elements.

+3
source

This seems to work fine for me:

 input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { -webkit-appearance:none; } input[type=search] { -webkit-appearance:textfield; -webkit-box-sizing:content-box; }
+1
source

Quote from "HTML5: Up and Running" by Mark Pilgrim:

" placeholder atttribute can only contain text, not HTML markup. However, there are some advanced extensions for providers (Http://trac.webkit.org/export/37527/trunk/LayoutTests/fast/forms/placeholder-pseudo-style.html ) which allow you to placeholder text in some browsers.

So, I suppose you will have to abandon the scripting solution for this aspect of your question, at least especially considering that so far no version of IE supports placeholder text.

0
source

CSS reset styles are always a good start as they save headaches.

If you want to remove the glow, you can probably play a little with the outline property, as you said, setting text-shadow:none can also help.

In any case, this is just a guess if you are not trying to use reset styles with reset at first, because they were created specifically to make the web page displayed the same in every browser.

0
source

More articles:


All Articles