Enhancing Jquery Autocomplete with personalized styling

Currently, I am utilizing the default autocomplete source code. However, after replacing the jquery-ui.css with my own CSS, I encountered an issue where I am unable to dropdown all the select box options and remove the bullets.

https://i.sstatic.net/lkidK.png

Below is the CSS snippet I am using:

.ui-autocomplete {
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background: #eeeeee;
}

.ui-autocomplete select {
padding: 5px 8px;
width: 120px;
border: none;
box-shadow: none;
background: #eeeeee url("arrow.png") no-repeat 90% 50%;
-webkit-appearance: none;
}

.ui-autocomplete select:focus {
outline: none;

}

.ui-menu .ui-menu-item a.ui-corner-all:hover, .ui-menu .ui-menu-item a.ui-corner-all:focus, .ui-menu .ui-menu-item a.ui-corner-all:active {
background:#ff8a00!important;
color:#000;
border-radius:0;
}

 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
background: #ff8a00;
border: none;
color:#000;
border-radius:0;
font-weight: normal;
}

Your assistance in resolving this issue would be greatly appreciated. Thank you!

javascriptjquerycssjquery-uijquery-autocomplete

Answer №1

Make sure you have applied the .ui-menu style correctly.

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: none;
}

Double-check the image path to see if it is in a different folder or if it does not exist.

An example can be found here:

http://jsfiddle.net/x67pkxve/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to eliminate unnecessary re-rendering of components that remain unchanged?

I am struggling with a component that contains various other components, such as text fields. Whenever an input is made in the text field, all the components are re-rendered. My goal is to prevent this re-rendering and only update the component that has a ...

javascriptreactjsreact-nativereact-hooks

What could be causing a specific CSS class to not take effect?

Recently, I embarked on a journey to learn Django framework with Python. My main source of knowledge is a course I found on YouTube. However, I encountered an issue where the CSS and JS features were not applying to my page as demonstrated in the course. ...

cssdjangobootstrap-4

Styling the CSS tables with alternating row styles for rows 1 and 2, followed by a different style for rows 3 and 4. This pattern will repeat

I've been struggling to create a CSS table style using tr:nth-child to alternate row colors: Row 1 - Blue Row 2 - Blue Row 3 - White Row 4 - White ... and so on. I can't seem to get it right! Can anyone help me out with this? Appreciate an ...

css

Dynamic positioning of livechatinc in real-time

Our website is currently using LiveChat from www.livechatinc.com. They insert the livechat code onto our page after it has been loaded. I am looking to dynamically position the livechat div on our page once the page is fully loaded. Attempting to achieve ...

jquery

Top Method for Initiating AJAX Request on WebForms Page

Looking for the best way to execute an AJAX call in a WebForms application? While ASP.NET AJAX components are an option, some may find them a bit heavy compared to the cleaner approach in MVC. Page Methods can be used, but they require static methods ...

javascriptjqueryasp.netajaxwebforms

Encountering difficulties with implementing and utilizing bootstrap in Symfony 5.3 with Encore plugin

While I am currently dealing with an older version of Symfony, I decided to create a new 5.3 Symfony application from scratch. However, I am facing difficulties when trying to integrate bootstrap into it. After consulting some documentation, I proceeded to ...

javascriptphpcsstwitter-bootstrapsymfony

Unusual behavior observed when routing onScroll in Next.js, with rendering occurring exclusively on the server side

In my attempt to leverage Next.js imperative routing api within a scroll handler for page navigation, I encountered an almost perfect solution by attaching it to the window. However, there is a slight color 'flash' as the scroll position resets w ...

javascriptreactjsroutesisomorphic-javascriptnext.js

What is the best way to manage the display of pages before the current page in pagination?

Below is the code I have written: // current page $p = $_GET['page']; // total number of pages $page_nums = 5; // creating pagination if( $page_nums > 1 ) { $data['pagination'] = '<div class="pagination_box">'; ...

phphtmlcss

What benefits does using the done() method in $.ajax offer over using success()?

As an illustration: $.ajax({ url: '@Url.Action("_exampleMethod","Example")', type: 'GET', cache: false, }).done(function (response) { // ... }); ...

jqueryajax

Struggling with accessing loopback API through request authentication

When attempting to access a loopback API on a web server using the standard POST login request, I consistently encounter the following error: {"error":{"statusCode":400,"name":"Error","message":"username or email is required","code":"USERNAME_EMAIL_REQU ...

javascriptnode.jsajaxrequestloopback

Mastering the utilization of the Data object in VueJS with Decorators can be tricky. One common error message you might encounter is, "Class method 'data' expected 'this' to be used."

Error > The class method 'data' should use 'this' but it is not. I encountered this issue and believed I fixed it as shown below: TypeScript Unexpected token, A constructor, method, accessor or property was expected <script lang ...

javascriptvue.jsvuejs2decorator

What could be causing the request parameter in my ag-grid to be undefined?

Currently experimenting with the ServerSide RowModel of Ag-Grid in combination with Angular. Planning to add server response later on, but for now focusing on familiarizing myself with the framework. Struggling to retrieve request parameter values from my ...

javascriptangulartypescriptag-gridag-grid-angular

Is there a way to include a button within the Rails code that would allow users to add a present using the <%= link_to_add_fields "Add A Gift", f, :presents %> function

I'm having trouble figuring out how to insert a button into a link_to_add_fields, like this: <%= link_to_add_fields "Add Another Item", f, :items %> while working on my Rails App. I've attempted to include class: "btn btn-mini btn-info" ...

cssruby-on-railsformsbutton

VueJS 3 is in the process of loading dynamic assets

I am facing an issue with loading and displaying images dynamically from the assets folder in my Vue.js project. The code I have written does not seem to work as expected: <img :src="getSource(data.thumbnail)" :alt="data.name"/> ...

javascriptnode.jsvue.jsvuejs3

I am experiencing issues with my JavaScript not functioning properly in conjunction with my HTML and CSS. I am uncertain about the root cause of the problem (The console is displaying an error message:

I am facing challenges in creating a content slider and encountering issues with its functionality. Specifically, when testing locally, I noticed that the current-slide fades out and back in upon clicking the arrows left or right, but the slide content is ...

javascriptjquerycsshtml

Create an animated underline for two CSS tabs

I'm interested in learning how to create a similar animation using JS, jQuery, or Vue Transitions with Bootstrap. I want to achieve the effect of moving the line under TAB1 to the right when TAB2 is clicked. Can anyone guide me on animating the div sm ...

jquerycssvue.jsbootstrap-4

What is the best way to update or include a new class in the jQuery mobile loader widget?

After reviewing the documentation at this link: I discovered a method to modify or add the default class of the loader widget, ui-loader. Despite my attempts, I have not been able to see any changes. You can view my demo here: https://jsfiddle.net/yusril ...

jquerycssjquery-uijquery-mobile

Tips for handling two JSON array objects with JavaScript

This particular function public function groups_priviledges($user_id = NULL){ $data['groups'] = $this->priviledges_model->admin_groups(); $data['member'] = $this->priviledges_model->empAdminGroup($user_id); echo ...

javascriptphpjqueryjsonajax

When the user clicks on the page, show the data fetched from MySQL and echoed in

I am facing an issue with a table containing a loan_id. When fetching the information, everything appears to be in order. However, I need to be able to click on the loan_id number and have it display results based on the corresponding id number. <?php ...

javascriptphpjquerymysqltwitter-bootstrap

The Rx min.js file was nowhere to be found in the "node_modules xjsundles" directory even after running npm install rxjs

As I was integrating the component RxJS into my project, I ran the command npm install rxjs. However, upon checking the node_modules/bundles file, I noticed that there is no Rx.min.js present. Instead, I found rxjs.umd.js and rxjs.umd.min.js files. I am c ...

javascriptangularrxjs