When the mouse leaves, the input search will automatically change the text color to black

I'm having trouble developing a search input, as I am facing an issue and unable to find a solution.

Currently, the search input is working fine; when I click on it, it expands. However, once expanded and I start typing, the text color turns white whereas I'd prefer it to remain black.

Also, when I click outside the input box, the text color changes back to black instead of remaining white or gray as desired.

Does anyone know how to achieve this using CSS? Is there a way to make the text color stay white upon mouse leave instead of turning black?

Link to my CodePen:

http://codepen.io/mib/pen/saytl/

My HTML:

 <li id="sb-search" style="float:right; list-style:none; height:20px;">
     <form id="search">                   
       <input name="q" type="text" size="40" placeholder="Search..." />             
      </form>
 </li>

My CSS:

#search input[type="text"] {
    border: 0 none;
    font:  12px 'bariol_boldbold';
    background: #141d22;
        text-indent: 0;
    width:110px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

#search input[type="text"]:focus {
    background: #141d22;
    color: #fff;
    width: 170px;
        outline:none;
        color:000;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
htmlcss

Answer №1

To make the text color white when the mouse leaves the selector in CSS, you can add color:#ffffff to #search input[type="text"].

Check out a demo here

Answer №2

Change the input to be white in color

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 ensure the bootstrap table header width aligns perfectly with the body width

I am having an issue with my bootstrap table where the header width is smaller than the body width because I set the table width to auto. How can I align the header and body widths? Here is a link to a plunker showcasing the problem. https://plnkr.co/edit ...

javascripthtmlcsstwitter-bootstrapangular-ui-bootstrap

PayPal's fast checkout page experiencing a billing problem

I'm experiencing a problem with my paypal express checkout where it won't allow guest-checkout without logging into paypal, despite having the necessary form fields: <input type="hidden" name="SOLUTIONTYPE" value="Sole" /> ...

htmlformspaypal

Swap out the traditional submit button on your form with a stylish Font Awesome

Can anyone assist with replacing the submit button with a Font Awesome icon? I've tried it myself, but the icon is not displaying on the button. Here is what I have attempted so far: <form action="{{route('destroycourse', $course->id) ...

htmlcss

Inserting line breaks in the data retrieved through AJAX

Utilizing ajax to transfer data from a sophisticated custom field wysiwyg editor. Within the markup provided, I am specifically addressing the div with the 'bio' class. However, upon receiving the data, it is consolidated into one large paragraph ...

javascriptphphtmljqueryajax

Choosing the right jQuery selector to target a section that contains div elements

Whenever the h2 element within a section is clicked, I want all the fields in that section to be displayed. For example, if the user clicks on 'Contact Information', the three form inputs (fields) below the Contact Information heading should appe ...

javascriptjquerycss

CSS - Ignoring Padding Causes Unexpected White Space to Appear

I am encountering a simple error, and the following address will direct you to where the issue can be seen. Why is certain parts of the header appearing white instead of the light shade of green it is set to be? It should be positioned right at the top un ...

css

javascript highchart image carousel

I am currently working on a visual chart project using the JavaScript library highchart. After setting up my chart with some dummy data, I am looking to incorporate functionality that allows for triggering an image slide based on the chart data. Specific ...

javascriptjqueryhtmlcsshighcharts

Is there a way to achieve a transparent background while animating the second text?

I am seeking to create a unique typography animation that involves animating the second text, which is colored and consists of multiple text elements to animate. The animation should showcase each text element appearing and disappearing one after the other ...

javascripthtmljquerycss

Inconsistencies with Colorbox behavior in an external HTML document

Encountering a strange issue with colorbox while attempting to display a "div" element from another HTML file. The code functions perfectly, except for the final "div" in the external file. The structure of my external file is as follows; div1 img par ...

jquerycsscolorbox

Tips for saving HTML data locally

Is there a way to persist my HTML element tag data even after the user closes the browser? For example: <div class="classOne" data-random="50"> If I use jQuery to change the data attribute like this: $(".classOne").attr("data-random","40") How ca ...

javascriptjqueryhtml

Symfony 4 Forms: Enhancing User Experience with Prototypes

Recently, I've delved into Symfony 4 and encountered an issue with rendering a form featuring a ChoiceType Field with numeric choices. The goal is to allow the user to select a specific number of tags. Here's a snippet from my controller: class ...

phphtmlsymfonytwigsymfony4

What is the best way to access a video stored in a local file on the initial page and then watch it on the subsequent

I recently encountered a scenario where I needed to select a video on one page and have it automatically play on another page without any redirection. The initial page displays a list of videos for selection, like this: FirstPage Once a video is chosen on ...

javascriptphphtmlvideo

Avoid opening the page when attempting to log in with jquery, ajax, and php

I am facing an issue with my code. I have a file named "index.html" which contains a login form. Another file called "dash.js" retrieves the username and password from the login form and redirects to "connectdb.php" to check the login credentials with the ...

javascriptphpjqueryhtmlajax

Is there a way for an inline element like <a> to enclose block level elements within it?

<a href="#"> <h1>Our Premier Package</h1> <h2>The top choice among our clients</h2> <p> Enjoy expanded storage and quicker assistance to guarantee constant access to your cruci ...

html

Angular 2 Date Input failing to bind to date input value

Having an issue with setting up a form as the Date input in my HTML is not binding to the object's date value, even though I am using [(ngModel)] Here is the HTML code snippet: <input type='date' #myDate [(ngModel)]='demoUser.date& ...

htmlangulartypescriptangular2-forms

Python AssertionError: The argument passed to the write() function in GAE must be a

Currently, I am utilizing Sublime Text 2 as my primary editor to develop a brand new Google App Engine project. UPDATE: While testing this code via localhost, I encountered an issue when accessing the app on appspot: Status: 500 Internal Server Error ...

htmlgoogle-app-enginepython-2.7

Applying Compiled CSS file in Node.js using Express and SASS not working as expected

Recently, I've delved into utilizing NodeJS with Express to serve my pug files. In addition, I decided to incorporate the "express-sass-middleware" to compile and serve the scss/css files in my project. While everything seems to be functioning as expe ...

cssnode.jsexpresssasspug

Tailwind.css - a "sticky" element is positioned outside of the parent "wrapper" element

Seeking your kind assistance. I am facing an issue where a fixed element is being displayed outside the parent container on large screens, as it is treated as "fixed" from the viewport rather than relative to its parent element. Any suggestions on how to ...

htmlvue.jsfrontendtailwind-csscss-position

Variations in Angular scope variable behavior

Code Snippet in HTML <input ng-model="test1.param"> <input ng-model="test2"> Code Snippet in Controller $scope.test1 = { param: null }; $scope.test2 = null; Upon entering text in both input fields: The value of $scope.test1.param changes ...

htmlangularjs

Sliding out the sidebar menu with Jquery

Hey there! I'm currently working on implementing a swipe feature for the side menu bar. I have already added a click method in my code, but now I also need to incorporate a swipe technique. When the side bar is opened, I want to remove the inside im ...

javascriptjqueryhtmlcss