How style the text in a searchbar with pixate?

Question

I have tried to style the UISearchBar text in my app with pixate. It work only after I dismiss the keyboard, but when I'm writing the text it not use my style:

I'm writting:

I'm writting

After the keyboard is closed:

After the keyboard is closed

This is my current CSS:

text-field {
    color: black;
    background-color : @colorEditTexto;
    border-radius: 4px;
    border-width: 8px;
    border-color: gray;
    height: 30px;

    placeholder {
        font-style: italic;
        color: darkgray;
    }
}
search-bar {
    background-color: @colorBarra;
    -ios-tint-color: white;
    color: white;

    text-field {
        color: white;
        placeholder {
            color: white;
        }
    }
}

score 0 · Answer 1 · answered Jan 29 '14 at 23:07

0

Try adding a highlighted pseudo-class like this:

search-bar {
    background-color: @colorBarra;
    -ios-tint-color: white;
    color: white;

    text-field {
        color: white;
        placeholder {
            color: white;
        }
    }
    text-field:highlighted {
        color: blue;
    }
}

answered Jan 29 '14 at 23:07

Clifton Labrum

13,053
9
65
128

This doesn't work. Somehow the UITextField that is contained in the UISearchBar isn't affected, no matter how broadly I try to style "text-field". – leberwurstsaft Jan 30 '14 at 14:02

pixatepaul · Answer 2 · 2014-01-30T00:03:37.827

0

Try setting a styleId or styleClass on your search bar and style it directly versus using the element name. For example:

#mySearchBar { ... }

Also, Pixate doesn't currently support the searchFieldBackgroundImageForState property, but we'll add that soon to more properly set the background image of a Search Bar.

And lastly, to set the color of the text, right now, this is probably the best way, in code:

[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setTextColor:[UIColor whiteColor]];

edited Jan 30 '14 at 00:03

answered Jan 29 '14 at 23:36

pixatepaul

251
2
5

This don't work. I forgot to mention that I have already apply this workaround. If the bar style is UISearchBarStyleMinimal (the only way to have the background color applied) then the text is black when writing and only become white when lost focus. – mamcx Jan 30 '14 at 18:17

score 0 · Accepted Answer · answered Mar 03 '14 at 18:31

I finally do this:

for (UIView* subview in [[self.subviews lastObject] subviews]) {
    if ([subview isKindOfClass:[UITextField class]]) {
        UITextField *textField = (UITextField*)subview;
        textField.styleMode = PXStylingNone;
        [textField setBackgroundColor:[UIColor colorWithHexString:@"#014148"]];
        textField.textColor = [UIColor whiteColor];
    }
}

I have this style interfering:

text-field {
    color: black;
    background-color : @colorEditTexto;
    placeholder {
        font-style: italic;
        color: darkgray;
    }
}

that is why is necessary to set PXStylingNone.

How style the text in a searchbar with pixate?

3 Answers3