Enhance the Search Box with a Vibrant Glow Effect When in Use

I need help adding a glow effect color around a search field when a user clicks on it to type. I want the border to have a shadow and the glow effect to be orange. I have included the CSS below, but I'm unsure of what to change or add. Any assistance is appreciated. Thank you! (-:


        .wsite-search {
            vertical-align: middle;
            width: 170px;
            box-shadow: 0px 0px 7px 1px black;
            border-radius: 7px;
        }

        .wsite-search-input {
            float: right;
            height: 20px;
            padding: 5px 5px !important;
            vertical-align: middle;
            width: 140px;
            border: 0;
            color: #ffc500;
            float: right;
            font-style: italic;
            background: url(input-bg.png) no-repeat;
        }

        .wsite-search-button {
            position: relative;
            width: 20px;
            height: 30px;
            float: left;
            border: 0;
            background: url(submit-bg.png) no-repeat;
        }
css

Answer №1

give this a shot

input{
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    font-size: 14px;
    margin: 0;
    padding: 3px 12px;
   width: 250px;
}

input:focus {
    border-color: #66afe9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0 none;
}

Answer №2

Here's a way to achieve the desired effect using jQuery focus and blur:

$(document).ready(function(){
  $("input[type = 'search']").on("focus",function(){
    $(this).css({
      'boxShadow' : '1px 1px 35px 0px #f75C30',
    }); 
    $("input[type = 'submit']").css({
      'boxShadow' : '1px 1px 35px 0px #f75C30',
    }); 
  });
  
  $("input[type = 'search']").on("blur",function(){
    $(this).css({
      'boxShadow' : '0px 0px 0px 0px #f75C30',
    }); 
    $("input[type = 'submit']").css({
      'boxShadow' : '0px 0px 0px 0px #f75C30',
    }); 
  });
  
});
input{
  transition:1s ease;
  border:none;
  background:#111;
  color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search">
<input type="submit">

Include this in your <head> section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Then add this just before closing your </body> tag:

<script>$(document).ready(function(){
   $("input[type='text']").on('focus',function(){
     $('form').css({
     'boxShadow' : '1px 1px 35px 0px #f75C30'
     });
   });
    $("input[type='text']").on('blur',function(){
     $('form').css({
     'boxShadow' : '0px 0px 0px 0px #f75C30'
     });
   });
});
</script>

CSS:

form{
  transition:1s ease;
}

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

Tips for making content vanish or remain concealed behind a see-through header during page scrolling

I made a JavaScript fiddle http://jsfiddle.net/claireC/8SUmn/ showcasing a fixed transparent header. As I scroll, the text scrolls up behind it. How can I make the text disappear or be hidden behind the transparent div when scrolling? Edit: I should also ...

htmlcss

Arrange divs in a stack when one becomes too full

Struggling to find a pure CSS solution for this issue, so seeking advice. Imagine three divs aligned horizontally next to each other. If one div overflows onto the next line, I want them to switch to a vertical stack layout. How can this be achieved? I h ...

htmlcssoverflow

A method for utilizing wildcards in conjunction with the .load function

Currently, I am utilizing jquery, jquery mobile, js, html, and css within Phonegap to develop my android/ios application. However, my understanding of js & jquery is somewhat limited. In my index.html file, I use .load to load other html files into s ...

javascriptjqueryhtmlcsscordova

Creating fluid designs for my boxes with CSS to enhance responsiveness

I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview Here is the ...

css

Utilizing gradient effects on table backgrounds with html/css

Trying to enhance my responsive table by adding a gradient background, but encountering an issue where the style being applied is repeating in every cell, creating a messy look. Here's the gradient I'm using: background: linear-gradient(to right ...

htmlcsshtml-tablegradient

The image spills out of its confines

Looking to create a dialogue box that fills the entire width and height of the screen? Want to divide its content into two sections - an image and a footer area with 2 rows of height? Struggling to contain the image within its designated space without over ...

htmlcsstailwind-css

Use a CSS rule only if the element is not nested by using the :not selector

Could use some assistance with this coding issue: .element { border: 1px solid red; display: block; } I want to exclude this rule when .element is a descendant of .no-border using the :not pseudo-selector. For example: <div class="element">I ...

htmlcss

Placing an icon and a title on the same baseline

I'm working on a new website design and I really like the layout shown in this image: https://i.stack.imgur.com/QuVRZ.png I've been struggling to align the icon with the title in a responsive manner. Here are some of the approaches I've att ...

htmlcss

What is the best way to align the navbar elements horizontally and at an equal height?

I am currently working on creating a navigation bar for my webpage using bootstrap. I have utilized the <li> tags, but I am facing an issue where the items are not lining up properly. Below is the code for reference: <nav class="navbar navbar ...

htmlcssfrontendbootstrap-5

Angular click event not functioning properly on elements loaded via http request

Check out my CodePen link: http://codepen.io/gauravcoder/pen/vLWEjJ?editors=101 I'm just getting started with Angular JS. I have some items that trigger an alert when clicked, it works fine for items that are not loaded via an HTTP request. However, ...

javascriptjquerycssangularjsajax

How can I ensure that my data remains properly aligned in a row with 9 columns while utilizing bootstrap?

My approach to creating a row with 9 columns involved using custom CSS to set each column's width to 11.11%, resulting in equal distribution across the row. I then applied the "custom-column" class to populate the row data: .custom-column { widt ...

htmltwitter-bootstrapcss

Ways to stylize bullet points in lists with CSS in HTML document

I am currently working on a Q&A page using simple HTML. This is the current appearance of my page. Check it out here on JSFIDDLE. My task involves adding an 'A' to the answer for each question. Some answers have multiple paragraphs, so the ...

htmlcss

Disregarding the Syntax of jQuery Mobile

Is there a way to override jQuerymobile's formatting and classes when styling an element? I want to apply my own custom style. I attempted using $.mobile.ignoreContentEnabled = true; in the pageInit function, followed by adding data-role="none" to th ...

jquerycssjquery-mobile

Experiencing problems with various React Carousel libraries when it comes to displaying

I have been attempting to integrate Carousel libraries into my react app, but I am encountering a common issue with all of them. The Carousels show the items on the first slide, but subsequent slides do not display any items, even though they exist within ...

javascriptcssreactjsslidercarousel

It is important for the button size to remain consistent, regardless of any increase in text content

My goal was to keep the button size fixed, even as the text on it grows. This is the current code I am using: .button { border: none; color: white; padding: 10px 50px; text-align: center; text-decoration: none; display: inline-block; font ...

javascripthtmlcss

Utilize Bootstrap to switch between 'collapse' and 'collapse in' depending on the device being used

I have a collapsible panel set to default "expand" (collapse in) and it is working well. However, I would like to make it "collapse" (shrink) for mobile and tablet devices. Is there any built-in feature in Bootstrap that can help me achieve this? <div ...

jqueryhtmlcsstwitter-bootstrap-3

Adjust the width of your table content to perfectly fit within the designated width by utilizing the CSS property "table width:

Example of a table <table> <tr> <td>Name</td> <td>John</td> <td>Age</td> <td>25</td> <td>Job Title</td> <td>Software Engineer ...

javascriptjqueryhtmlcss

CSS mysteriously malfunctions on certain iPhones

Key Concept Despite testing with responsive simulators and ensuring there were no issues, some iPhone users have reported problems with the style of my web page. Coding Essentials The page is designed to use 2 custom CSS files - one for screens larger t ...

htmliosiphonecss

Guide on how to use a tooltip for a switch component in Material-UI with React

I am attempting to incorporate a tooltip around an interactive MUI switch button that changes dynamically with user input. Here is the code snippet I have implemented so far: import * as React from 'react'; import { styled } from '@mui/mater ...

javascriptcssreactjsmaterial-ui

Concealing and revealing elements through css styling

In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience. Recently, I created a page with a custom video fie ...

csswordpress