Color Changing Search Bar
Color Changing Search Bar
  • Post author:
  • Post category:Uncategorized
  • Reading time:7 mins read
  • Post published:May 4, 2022
  • Post comments:0 Comments
  • Post last modified:May 4, 2022

Hy Everyone, In this tutorial, we will create a search bar that will change color when we enter something. Hope you guess it and you are right. we will use javascript when the key will be pressed. Without wasting the time let’s start.

Our search bar will have an input field and a button. when we press any key, the javascript will change the border color of the input field and the button, it will also change the color of the button text.

Table of Contents

For creating this design we will need three files called index.html, style.css, and script.js. Here we are using jquery to apply CSS to HTML elements. Let’s start with our index.html file.

index.html

First we will add our style.css link and the jQuery link in the <head> section.

<head>
  <title>Search Bar</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>


after this, we will start our design work. Start creating with a div as class name “container”, create input field and a button as we have shown below:

<body>
  <div class="container">
    <input type="text" name="searchBar" id="searchBar" class="search" onkeypress="myFunc()">
    <input type="submit" name="search" class="search" id="btn">
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>


we have also linked our script.js file at the ending of the <body> tag.

Here our index.html work is complete. Let’s move to our next file style.css.

style.css

First, remove the default margin and padding of the body.

body{
  margin: 0px;
  padding: 0px;
}


Now write the code for the “container” class. we will make it absolute to move it into the center.

.container{
  text-align: center;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,50%);
  overflow: hidden;
}


Now set the border, background color, padding, and font size for the input element.

input{
  border: 1px solid black;
  background-color: transparent;
  padding: 5px 5px;
  font-size: 15px;
}


we have some different properties for the input tag, so we will use a child selector the set the different properties for these input tags.

input:nth-child(1){
  border-right: 0px solid transparent;
  border-radius: 20px 0px 0px 20px;
  padding-left: 5px;
}


the nth-child(1) is our text bar. we have removed the right border of these input tags to present it as a single unit. Next, we set the border radius, here we have four values for the border radius. It works like this:

border-radius: topLeft topRight bottomRight bottomLeft;

Next, we will write code for our input button.

input:nth-child(2){
  margin-left: -6px;
  border-left: 0px solid transparent;
  border-radius: 0px 20px 20px 0px;
}


Here we are using the margin-left property, and the value is -6px because it was having a gap between both input tags. So we removed this gap.

input:focus{
  outline: none;
}


when we click on any input type field or button, it comes into focus. here we are using the outline property when an input tag is in focus. when an input tag is in focus it makes an outline border, so outline: none; is used to remove that outline border when an input field is clicked.

Here are styling is complete. Let’s move to our script file.

script.js

function myFunc() {
	var r = Math.floor(Math.random()*255);
	var g = Math.floor(Math.random()*255);
	var b = Math.floor(Math.random()*255);	
	$(".search").css("border-color", "rgb("+r+","+g+","+b+")");
	$(".search").css("color", "rgb("+r+","+g+","+b+")");
}


here we have created a function as myFunc() when a key is pressed in the input bar.

Inside the function, we have three variables r,g, and b, we are using these variables to hold all three values for our RGB color. To get these values we are using the Math.random function to get values between 0 to 255.

after these, we applied these colors to the .search class as border color and text color.

Here is it!!!

Github Code Link!

If you find this post helpful then please share this with your friends.

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply