Troubleshooting a CSS problem with typeahead.js Integration

Having trouble with the typeahead.js plugin from Twitter? Check out an example of how it's supposed to work:

Here is my implementation:

The Issues I Am Facing:

  • The textbox should change to white when in focus (this worked before installing the plugin)
  • Suggested autocompleted options in the textbox should appear in a lighter color

Below is the CSS code for my site:

.navbar .top-search form { margin: 0 10px 0 0; padding-top: 5px; position: relative; }
.navbar .top-search input, .navbar .top-search button { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.navbar .top-search input { padding: 2px 24px 2px 10px; border: none; margin: 0; width: 150px; background: #999; -webkit-border-radius: 20px; moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; }
.navbar .top-search input:focus { background: #f5f5f5; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; }
.navbar .top-search button { opacity: .6; position: absolute; right: 7px; top: 9px; padding: 0; margin: 0; line-height: 12px; background: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; }
.navbar .top-search input:focus + button { opacity: 1 }

This is the CSS styling for typeahead:

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

Your assistance on this matter would be greatly appreciated.

Thank you

jqueryhtmlcss

Answer №1

Inside the typeahead.css document, at line 13, there is a code snippet that looks like this:

background-color: transparent !important;

This particular code serves a specific purpose. It sets the background color to transparent for elements within the .tt-query class (although it's unclear where exactly this class is used in your HTML). Your :focus styles are functioning correctly as they are. If you were to eliminate the use of !important, everything should still work as intended.

Alternatively, you could follow dark's suggestion and apply the !important directive to the focus styles instead. While this solution does work, I personally reserve it for troubleshooting and final production stages, rather than using it extensively on live websites.

Answer №2

  1. If you add the !important rule to .navbar .top-search input, the white color will appear when focused. There seems to be a conflict in specificity.

    Include it in this way:

    .navbar .top-search input:focus {
background: none repeat scroll 0 0 #F5F5F5 !important;
box-shadow: none;
}

  2. To change the font color of suggestions, modify the .tt-suggestion p selector in your typeaheadstyling.css file on line 58

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

Shifting an identification to the following element with the help of jQuery

I need to transfer an ID from one element to the next select element on the page. I am facing this challenge because the software used to create the select boxes does not allow for classes or ids to be directly added to select elements. Additionally, I am ...

jqueryhtml

I am facing an issue in Node.js where I am unable to successfully store form data in MongoDB using Mongoose and then retrieve it to display on

I have been working on setting up an application where users can input their personal data, which will later be displayed on the web page. I am utilizing passport for local authentication. The web app generates an HTML form that allows users to enter their ...

htmlnode.jsmongodbmongoose

Can someone provide me with a guide on sending checkbox values to a text input field using Ajax and PHP

Can someone please assist me in evaluating the values of all checked checkboxes and passing the result to an HTML text input using PHP and AJAX? I have been trying, but without success. Below is the code snippet I am currently working with: ...

javascriptphpjqueryajax

Prevent Browser from Saving Passwords

Our security team has mandated that we disable the password manager for protected fields on our HTML form. For instance, consider this simplified HTML form below. When the submit button is clicked, Firefox (version 51.0.1) prompts the password manager to a ...

html

The jquery datepicker is malfunctioning after switching to another component

My current setup includes the following versions: jQuery: 3.3.1 jQuery UI: 1.12.1 AngularJS: 6 Here's a snippet of my code: <input id="test" type="text" class="form-control" value=""> In my component (component.t ...

javascriptjqueryhtmlcssangularjs

Tips for compressing an image with jquery

Due to limited access to the php.ini file, I am in need of a solution to compress uploaded images before they reach the server side. Additionally, I need to handle multiple text inputs simultaneously (such as comments, group-name, event-name). Here is my ...

phpjqueryajaximage-uploadingform-data

What is the process for transferring my jQuery-generated XML to a PHP array?

Hey there, I'm new to PHP and currently trying to understand how to pass an array method to another array in PHP. The code I have creates XML with values every time an action is performed. My goal is to send this data to a PHP array for later use in a ...

phpjqueryxml

Issue with background color not showing up in blank cells of a table

I am working with a table that has alternating gray background colors for every second row. However, I'm having trouble capturing the empty cells. Even though I have applied CSS to target every even row, the empty cells are not being affected. Here is ...

htmlcssvue.jscss-selectorsbackground-color

Does the utilization of setTimeout(function, 100) have an impact on performance?

I have implemented a function that continuously checks if the URL contains any of the navigation hrefs every 100ms. If it finds a match, specific elements are assigned the class active. Here's the code snippet: var checkActive = function(){ ...

javascriptjqueryhtmlcss

Position dropdown elements using absolute alignment

I am attempting to replicate the drop-down menu style used on Twitter. Here is an example of what I am trying to achieve: (Click on the language option). To accomplish this, I have implemented the following HTML: <a href="#language">English</a ...

jquerycss

The color of the text changes based on its alignment

Utilizing style sheets and attribute selectors, create styles that will change the color of text displayed on the page based on its alignment (e.g. left-aligned text in blue, right-aligned text in green). Additionally, text within h2 tags should have color ...

htmlcss

Only execute jQuery if the last visited page was the homepage

On the homepage, the CSS that is initially loaded on the JSFiddle is present. My goal is to have the inner pages transition to their new CSS class only when visited after the homepage. <div class="container"> <div> Thank you for your ass ...

jqueryhtmlcsscookies

I find myself having to double-click the Jquery submit button

Can anyone help with an issue I'm having where I need to click a div button twice for the link to work properly? Thank you <div class="toolbar"> <table width="100%"> <tr> <td class="toolbar-button" title="Print Data" id ...

jquery

Placing objects in an array results in the inclusion of numerous null values

Having trouble assigning an object to an array by key, as it is resulting in multiple null values alongside the actual object. To start off, I am outputting data to an HTML data-* attribute using PHP: <div id="{{$obj_id}}" data-my-obj="{ ...

javascriptjquery

Refreshing a javascript variable following an ajax callback

How can I update a JavaScript variable after an AJAX callback? var x = 1; $(document).on('click', '.classname', function(){ console.log(x); }); $.ajax({ type: 'post', url: tmplUri + '/ajax/test.php', ...

javascriptjqueryajax

Utilizing loop variables in ng-class and ng-click directive

This piece of code generates a list consisting of seven thumbnails, with the currently active image designated by the active and thumb classes. <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]"> <img ng-src="images/{{no}}t.jpg" class="thumb" ng ...

javascriptcssangularjs

Is there a way to utilize a jQuery variable in the URL parameter in a C# integrated Ajax request?

Below is the code I currently have: var chosenFacility = $("#Facility").val(); $.ajax({ type: "Post", url: "@Url.Action("GetLocations", "Item", new { Facility = "chosenFacility goes here"})", dataType: 'json', su ...

c#jqueryajaxasp.net-mvc

Is there a method to automatically execute an 'onchange' function whenever a value is updated due to an AJAX response?

Many drop down menus are present on my page; <... onchange="callthisfunction(...)"...> While a manual change easily triggers the function, using ajax to load saved data does not register the value as changed and the function is not triggered. Is th ...

htmlajaxonchange

Blazor: Is it possible to dynamically change the background image of a CSS class in real time?

Setting the background image during design time is straightforward: .page-background-class { background-image:url(../images/image-name.png) } However, I am interested in dynamically setting the background image at runtime. My goal is to display the image ...

cssblazor

Creating a text field in an input box using JavaScript or jQuery to input data

At work, I need to use a web application that requires me to fill in two input fields. However, when I try to do so using JavaScript commands, the strings appear but the "Add" button remains disabled. Additionally, even if I enable the button, the data can ...

javascriptjquerytextboxtextfield