Ways to customize the appearance of a form element when an input is active

Looking for tips on how to style the input[type=submit] element when the input[type=text] is in focus.

Consider this scenario:

<form id="example">
    <input type="text" name="search">
    <input type="submit" value="Search">
</form>

<style>
    #example > input[type="text"]:focus {
        // apply styles to the input[type="submit"]
    }
</style>

Trying to achieve consistency between the border colors of the search input and submit button. The challenge lies in changing the styling of one element when another is focused, such as in a wordpress theme with an inline search form.

One option is to style the enclosing div, but then the issue of focusing on one element affecting another arises.

Wondering if CSS3 has the capability to handle this or if turning to a JavaScript solution is inevitable as a last resort.

htmlcss

Answer №1

If your current code structure matches what you've shared in the question, utilizing the adjacent selector + can help in selecting the submit button when a text input is focused.

The specific selector to use is: 

#example > input[type="text"]:focus + input[type="submit"]

If you want to learn more about the + selector, check out this comprehensive explanation on "What does the “+” (plus sign) CSS selector mean?", which also includes information on browser support.

Here's a sample code snippet demonstrating how it works. It may not look fancy, but it gets the job done :) 

#example > input[type="text"]:focus + input[type="submit"] {
  background: gray;
}
<form id="example">
    <input type="text" name="search">
    <input type="submit" value="Search">
</form>

Answer №2

If you're looking for a solution using JQuery, take a look at this demo on JSFiddle: https://jsfiddle.net/t33rdra6/2/

$(document).ready(function() {

    $('input').blur(function() {
        $('input[type="submit"]').removeClass("focus")
      })
      .focus(function() {
        $('input[type="submit"]').addClass("focus");
      });
  });

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

HTML DOCTYPE causing havoc with my CSS styling

When using the materialize framework, I've noticed that adding <!DOCTYPE html> causes my CSS to not be recognized. However, everything works fine without <!DOCTYPE html>. Any suggestions on how to resolve this issue? Update : <?ph ...

htmlcssmaterialize

Difficulty in displaying Font Awesome Unicode on website

I am struggling to populate a list with Font Awesome icons 4.7.0 in my HTML code using Bootstrap. Strangely, only the first icon is displayed while the rest remain invisible. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- ...

csstwitter-bootstrapbootstrap-4iconsfont-awesome

Use Html.ActionLink to trigger events in various sections of the code

I'm attempting to create an ActionLink that will trigger an action in a different section of the code. Here is what I have so far: <div class="col-md-4"> @Html.ActionLink("Click to Perform Action", "Action", "SomeController") </div> ...

htmlasp.net

Sticky box fails to maintain position as header scrolls

I am looking to create a Sidebar that sticks to the window while scrolling, but stops when it reaches the footer. I have managed to get it partially working, but there is a small issue that I can't seem to solve. Test it live here: Everything seems ...

javascriptjquerycsshtmlposition

The checkbox that is checked using prop() will not trigger any events that are linked to the "change" event

When using jQuery's prop() method to check boxes, it does not trigger the listeners attached to the change event. The code I have looks like this: HTML <div> <label> <input type="checkbox" class="ch" />test</label&g ...

javascriptjqueryhtml

Icon appearing outside the button instead of inside

Here's a button I'm working with: <button class="glyphicon glyphicon-option-horizontal" (click)="myFuncion()"></button> Recently, I updated my bootstrap library from version 3 to 4.2.1 and now the icon is no longer visible. I' ...

htmlangulartwitter-bootstrap

How can I incorporate a search bar or similar feature on my website that mimics the functionality of Ctrl+F?

Is there a way to incorporate a search bar on certain pages of my website that functions similarly to the Ctrl+F feature in Google Chrome? Essentially, I am looking for a "find" function that searches the entire page(s). My site is built using WordPress, ...

htmlwebbrowser

What allows me to modify the border color and thickness of my table's <thead>, but prohibits me from changing the background color?

I have successfully changed the border styling of the top bar in the table, however, I am struggling to change the background color no matter what I try. Can someone point out where I might be making a mistake? Here is my code: <table> <thead> ...

htmlcss

section featuring a striking visual, user input form, and descriptive content

I want to create a layout with a background image in a div, a signup form on the right side, and a div containing h1 tags on the left side. Here is the HTML code: <html> <title> GoToMy PC </title> <head> <link rel="stylesheet" ...

htmlcss

Restrict the number of choices in a drop-down menu using Angular

Is it possible to limit the number of results displayed in a dropdown select tag and add a scrollbar if there are more options? Check out my code below: <select class="form-control" name="selectedOption" [(ngModel)]='selectedOption'> ...

angularcssangular5

Is there a way to create a universal script that works for all modal windows?

I have a dozen images on the page, each opening a modal when clicked. Currently, I've created a separate script for each modal. How can I consolidate these scripts into one for all modals? <!-- 1 Modal--> <div class="gallery_product col-lg-3 ...

javascripthtmlcssbootstrap-4bootstrap-modal

What is the best way to eliminate the unwanted white space below the footer on a webpage

I'm working on a website and I've noticed that at the end of the footer, there is a large block of white space that shouldn't be there. I've tried adjusting the HTML and CSS code, but nothing seems to fix the issue. Strangely, other pag ...

htmlcssfooter

Identify certain lines from the paragraph text

Suppose you have an HTML Paragraph Element (e.g., <p>) with certain text sections highlighted using a HTML Mark Element (e.g., <mark>). I am interested in adding a vertical line in the margin or gutter (uncertain about the appropriate term) tha ...

htmlcss

Is Html.Raw necessary for handling ragged html generated by Razor?

When it comes to generating HTML in a dynamic grid model using Razor, the following code snippet is often used: @{ int blockCounter = 0;} @foreach (var item in Model.Items) { if (blockCounter++ % 3 == 0) { //ragged html open here, when needed ...

htmlrazorhtml-helperrazor-2

Looking for a way to update a world map image by selecting multiple checkboxes to apply a flood fill color to different countries using Mogrify

Exploring different methods to achieve my goal, I am wondering if creating a web service where users can track visited countries on a world map can be done in a simpler way than using Javascript or Ajax. The idea is for users to mark the countries they hav ...

javascripthtmlajaximagecheckbox

I seem to be having some trouble with localStorage. Can anyone shed some light on why this might be

I'm having trouble with the code below and need some assistance to achieve the desired result. HTML: Name: <input type="text" id="name" name="name"></input> <button id="send" type=&qu ...

javascripthtml

Crop images in a canvas using a customized rectangle with the help of JQuery

I am trying to crop an image inside a Canvas element using a selection rectangle. My project utilizes jQuery and I am in search of a plugin that can help me implement this custom selection rectangle on the canvas itself, not just on images. Are there any ...

javascriptjqueryhtmljquery-pluginshtml5-canvas

Exploring innovative ways to extend outside the boundaries of the container without compromising on responsive design

I am facing a challenge in building this page as I am unsure of how to make the image extend beyond the bootstrap container while still maintaining a responsive layout. Is there a way to achieve this without resorting to absolute positioning for every indi ...

htmlcssbootstrap-4responsive-imagesresponsiveness

Transferring css to an external file within an angular 4 component by utilizing webpack

I encountered this specific error message: Error: Anticipated 'styles' to be a collection of strings. Despite the fact that I have clearly defined the styles as an array of strings: styleUrls: ['./app.component.css'] Can anyone pinp ...

cssangularwebpack

"Table layout set to fixed is failing to function as intended

Can someone help me figure out why the CSS table in the code below is not hiding the content that exceeds the table height of 200px? Instead, the table is expanding vertically. <div style='display:table; border:1px solid blue; width:200px; table ...

htmlcss