New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong icon color for search inputs in b-theme. #6757

Closed
andergrim opened this Issue Nov 25, 2013 · 6 comments

Comments

Projects
None yet
3 participants
@andergrim

Description:
The icon (looking glass) in the input type="search" element is black in the dark b-theme. The "clear text" icon that shows after a user begins to typ into the input turns out as expected (white).

Test page/Steps to reproduce/Outcomes:
http://jsbin.com/ofuhaw/980/edit

Platforms:
Latest stock Chrome browser for Android 4.3. Google Chrome browser v 31 for Ubuntu 13.04.

Versions:
jQuery Mobile 1.4.0 RC1
jQuery 1.8.2

@ghost ghost assigned jaspermdegroot Jan 23, 2014

@jaspermdegroot jaspermdegroot modified the milestones: 1.4.2, 1.4.1 Feb 8, 2014

@jaspermdegroot jaspermdegroot removed this from the 1.4.2 milestone Feb 27, 2014

@jaspermdegroot jaspermdegroot added this to the 1.5.0 milestone Feb 5, 2015

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Feb 5, 2015

Member

Suggested solution: #7953 (comment)

Member

jaspermdegroot commented Feb 5, 2015

Suggested solution: #7953 (comment)

@jaspermdegroot jaspermdegroot added the Demos label Jun 1, 2015

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 1, 2015

Member

We should add a demo to illustrate how you can change the classes of the search icon span with data-classes="{ 'ui-textinput-search-icon': 'ui-icon ui-icon-search' }" to leave out the ui-alt-icon class in case you use a dark theme.

Member

jaspermdegroot commented Jun 1, 2015

We should add a demo to illustrate how you can change the classes of the search icon span with data-classes="{ 'ui-textinput-search-icon': 'ui-icon ui-icon-search' }" to leave out the ui-alt-icon class in case you use a dark theme.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Aug 2, 2015

Member

@arschmitz @gabrielschulhof

I tried to add a demo for this but it doesn't work as expected.

Markup:

<form>
     <label for="search-12">Search:</label>
     <input type="search" name="search-12" id="search-12" data-theme="b" data-classes="{ 'ui-textinput-search-icon': 'ui-icon ui-icon-search' }">
</form>

Result:
The search icon only gets class ui-textinput-search-icon and the wrapper doesn't get the corner and shadow classes anymore.

Am I doing something wrong?

See http://view.jquerymobile.com/1.5-css-and-demos/demos/textinput/#Theming

Member

jaspermdegroot commented Aug 2, 2015

@arschmitz @gabrielschulhof

I tried to add a demo for this but it doesn't work as expected.

Markup:

<form>
     <label for="search-12">Search:</label>
     <input type="search" name="search-12" id="search-12" data-theme="b" data-classes="{ 'ui-textinput-search-icon': 'ui-icon ui-icon-search' }">
</form>

Result:
The search icon only gets class ui-textinput-search-icon and the wrapper doesn't get the corner and shadow classes anymore.

Am I doing something wrong?

See http://view.jquerymobile.com/1.5-css-and-demos/demos/textinput/#Theming

jaspermdegroot added a commit that referenced this issue Aug 2, 2015

jaspermdegroot added a commit that referenced this issue Aug 2, 2015

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Aug 3, 2015

Member

@jaspermdegroot yes remove the quotes around the object in your markup

Member

arschmitz commented Aug 3, 2015

@jaspermdegroot yes remove the quotes around the object in your markup

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Aug 3, 2015

Member

@arschmitz

Removing the quotes around the object will result in invalid markup, but the problem was related to quotes. Need to use double quotes inside the object. This works:

data-classes='{ "ui-textinput-search-icon": "ui-icon ui-icon-search" }'
Member

jaspermdegroot commented Aug 3, 2015

@arschmitz

Removing the quotes around the object will result in invalid markup, but the problem was related to quotes. Need to use double quotes inside the object. This works:

data-classes='{ "ui-textinput-search-icon": "ui-icon ui-icon-search" }'

jaspermdegroot added a commit that referenced this issue Aug 3, 2015

jaspermdegroot added a commit that referenced this issue Aug 3, 2015

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Aug 21, 2015

Member

Fixed on 1.5

Member

arschmitz commented Aug 21, 2015

Fixed on 1.5

@arschmitz arschmitz closed this Aug 21, 2015

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Jul 4, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment