Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

Matching elements which do NOT have a certain attribute

Hello.

I'm trying to create a user style for myself, which makes form fields usable even with a dark system theme (I'm using ArchLinux w/ Gnome 2.24 and Cillop-Midnite theme; and Firefox 3.0.4 and the Default Tango theme).

So far, I've got this:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix(http) {
textarea { background-color: #003333 !important; color: #99FFFF !important; -moz-appearance: none !important; }

input[type="text"], input[type="password"], input[type="file"] { background-color: #000066 !important; -moz-appearance: none !important; }

input[type="text"] { color: #CCFFFF !important; -moz-appearance: none !important; }
input[type="password"] { color: #3333FF !important; -moz-appearance: none !important; }
input[type="file"] { color: #66FFFF !important; -moz-appearance: none !important; }

select, option { background-color: #330000 !important; -moz-appearance: none !important; }
select { color: #FFCCCC !important; -moz-appearance: none !important; }
option { color: #FF6666 !important; -moz-appearance: none !important; }
}

(See http://pastebin.ca/1285803 for a better readble source.)

This works quite well - but every now and then, there are forms out there, which use no good source code like





The problem here is with the tag, which doesn't have any attributes (or, more importantly, is missing at least the type attribute). Example http://dl.getdropbox.com/u/135660/Styles/form.htm with source at http://pastebin.ca/1285806 .

Now my problem is, that I don't know how to adress fields which lack the type attibute. I do NOT want to add something like "input { ... }" to my user style, because this would also match other input fields (like button or whatnot).

Q: How to select fields of a given type (eg. input) which lack a certain attribute (eg. type)?

Thanks a lot,
Michael

Comments

  • edited December 2008
    something like this?
    body>form>input{background:green!important;-moz-appearance:none!important}
    also css2 css3
  • http://forum.userstyles.org/comments.php?DiscussionID=2125&page=1#Item_1
    Posted By: ChoGGisomething like this?
    body>form>input{background:green!important;-moz-appearance:none!important}
    alsocss2css3
    No. Not something like this :) "Q: How to select fields of a given type (eg. input) which lack a certain attribute (eg. type)?" :)

    I didn't want to add stuff like input {}, because that would also match other input fields (like button or whatnot), or wouldn't it?

    In the css3 documentation, I read about the :not pseudo class and tried to use

    :not(input[type])

    but that doesn't work - when I try to enter that in stylish, it shows an error message that the style isn't valid. But what would that match anyway? It would match everything, which is not an input field with the attribute type. Eg. it would match things like "b" equally well. That's not what I want - I want to match every input field which doesn't have a type attribute.

    I revised my example. See https://dl.getdropbox.com/u/135660/form3.htm or http://pastebin.ca/1286006 for the revised source code. In there, I simply added all the input fields with a lot of type values. Also have a look at the following CSS (http://pastebin.ca/1286010):

    @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url-prefix(http) { body { background-color: blue !important; -moz-appearance: none !important; } input { display: block !important; height: 100px !important; width: 100px !important; background-color: black !important; margin: 1cm !important; border: 10px solid black !important; -moz-appearance: none !important; } }

    Now how to write a style that matches just what I called "simple" in the sample HTML, of course without having to rely on the order of the fields (ie. ignore that in this EXAMPLE <input> is the 1st field after form)?

    Cheers,
    Michael
  • :not has to be added to an existing selector, and you can only have one thing inside.

    All things that aren't inputs with a type:
    *:not(input):not([type])

    All inputs that don't have a type
    input:not([type])
  • Posted By: Jason Barnabe (np)
    […]
    All inputs that don't have a type
    input:not([type])
    Ah, so that's the way it works! Thanks a lot.

    FWIW, the following works pretty well for me (also available at http://pastebin.ca/1286114):

    @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url-prefix(http) { textarea { background-color: #003333 !important; color: #99FFFF !important; -moz-appearance: none !important; } input[type="text"], input[type="password"], input[type="file"], input:not([type]) { background-color: #000066 !important; -moz-appearance: none !important; } input[type="text"] { color: #CCFFFF !important; -moz-appearance: none !important; } input[type="password"] { color: #3333FF !important; -moz-appearance: none !important; } input[type="file"] { color: #33FFFF !important; -moz-appearance: none !important; } input:not([type]) { color: #66FFFF !important; -moz-appearance: none !important; } select, option { background-color: #330000 !important; -moz-appearance: none !important; } select { color: #FFCCCC !important; -moz-appearance: none !important; } option { color: #FF6666 !important; -moz-appearance: none !important; } }

    Again: Thanks a lot! I really appreciate it!

    Cheers,
    Michael
Sign In or Register to comment.