jQWidgets Forums

Tagged: font color, Input, jqxinput

This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 10 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Autocomplete Font Color Posts

January 5, 2015 at 4:51 am Autocomplete Font Color #64930

C.S.Putera

Participant

Hello, how to change the color of the options shown in the auto complete field ? Please help, thank you.

January 5, 2015 at 9:22 am Autocomplete Font Color #64956

Nadezhda

Participant

Hello C.S.Putera,

You can change the font color with css or just set some JQWidgets’ theme. Here is an example which shows how to change font color via css:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <style>
        .jqx-widget-content {
            color: red;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var timer;
            $("#input").jqxInput({
                placeHolder: "Enter a City", height: 25, width: 200,
                source: function (query, response) {
                    var dataAdapter = new $.jqx.dataAdapter
                    (
                        {
                            datatype: "jsonp",
                            datafields:
                            [
                                { name: 'countryName' }, { name: 'name' },
                                { name: 'population', type: 'float' },
                                { name: 'continentCode' },
                                { name: 'adminName1' }
                            ],
                            url: "http://api.geonames.org/searchJSON",
                            data:
                            {
                                featureClass: "P",
                                style: "full",
                                maxRows: 12,
                                username: "jqwidgets"
                            }
                        },
                        {
                            autoBind: true,
                            formatData: function (data) {
                                data.name_startsWith = query;
                                return data;
                            },
                            loadComplete: function (data) {
                                if (data.geonames.length > 0) {
                                    response($.map(data.geonames, function (item) {
                                        return {
                                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                            value: item.name
                                        }
                                    }));
                                }
                            }
                        }
                    );
                }
            });
        });
    </script>
</head>
<body class='default'>
    <input type="text" id="input" />
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

January 5, 2015 at 5:57 pm Autocomplete Font Color #64983

C.S.Putera

Participant

Thank you for your response. I’ve tried adding the css :


<style>
        .jqx-widget-content {
            color: red;
        }
</style>

It changes the font ‘within’ the jqwidgets field, but when I populate the options from the autocomplete, the options still in blue color. What I want to achieve is to set the color of the fonts in the options to black. Any other way to achieve that ? Thank you.

January 6, 2015 at 6:55 am Autocomplete Font Color #64998

Nadezhda

Participant

Hi C.S.Putera,

Please, provide us with more information or a sample code.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.