Tips on changing the outline color by clicking

I'm working on a simple code where I need to change the outline color when a user clicks on a text field.

<input type="text" id="box1" />
<input type="password" id="box2" />
<input type="email"  id="box3" />

<input type="submit" id="sub" value="submit" />

I don't know how to achieve this. My idea involves using jQuery to adjust the outline color and add a box shadow for a better visual effect:

$(document).ready(function(){
$(#box1).click(function(){ 
$(this).css('outline-color','#00BFFF').css('box-shadow',' 0px 9px 0px rgba(0, 161,   214,1)')
});

});

I've been stuck trying to figure this out since last night and could use some guidance on whether my approach is correct.

Answer №1

When a user is typing in a textbox, the :focus pseudoselector will select it, but will reset when they click out. Are you looking for this functionality?

http://jsfiddle.net/m8WcN/

.foo:focus{

   outline-color:#00BFFF;
   box-shadow: 0px 9px 0px rgba(0, 161,214,1);

}

Answer №2

Check out this solution:

Live example http://jsfiddle.net/kEFde/ or http://jsfiddle.net/5PhkD/. You can apply a class to add the shadow color to all text boxes.

Don't forget to include a ' for the id attribute of box.

Everything else should meet your requirements :)

Code snippet

 $(document).ready(function () {
  $('#box1').click(function () {
      $(this).css('outline-color', '#00BFFF').css('box-shadow', ' 0px 9px 0px rgba(0, 161,   214,1)')
  });

  });

Screenshot of it in action:

Answer №3

It is possible to change the outline color without the need for JS, by simply using CSS:

#box1{
    outline-color: #00BFFF;  
}
#box1:hover{
    box-shadow: 0px 9px 0px rgba(0, 161,   214,1);
}

For better cross-browser compatibility, consider adding prefixes.

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

Utilizing jQuery to manage asynchronous tasks, such as executing AJAX requests, handling promises, and using deferred

Exploring My jQuery Plugins: (function ($, window, document, undefined) { $.fn.loadPageContent = function (url, dataToSend) { url = url || window.location.href; dataToSend = dataToSend ? dataToSend : {}; return $.post(url, data ...

Can Vuetify's grid system seamlessly integrate with the Bootstrap grid system?

According to information from the Vuetify documentation: The Vuetify grid draws inspiration from the Bootstrap grid. It involves the use of containers, rows, and columns to organize and align content. If I utilize Bootstrap grid classes in a Vuetify pr ...

Eliminate extraneous space with the clearfix:after pseudo-element

Could use some help figuring out how to remove the unwanted whitespace caused by clearing the float (specifically after the tabs). Any suggestions on how to fix this issue? Take a look at the code snippet below (jsfiddle): /* Clearfix */ .clearfix:af ...

Adding Hebrew characters from the URL query string to a field's content

I have encountered an issue while trying to extract a query string parameter value and inserting it into a field. The parsed output is not as expected. Here is the URL with the query string: activities.html?t=שלום Instead of displaying the value "ש ...

Repair the masthead background during overscroll

The Dilemma At the top of my webpage, I have a sleek masthead with a captivating background image that scrolls along with the page. However, there is an issue when users overscroll upwards, causing an undesirable white overflow to appear. To rectify this ...

Can you incorporate personalized icons in ReactJS?

Is there a way to incorporate my personally designed custom icons, available in both SVG and TTF formats, into a React project? I am interested in using these icons in my navigation bar, such as creating a unique home icon for the home button. ...

Issues with Font-Face Implementation

Hey there! I'm currently working on incorporating a new font into my website using font-face. However, it seems like something might be missing from my code because the style isn't being applied correctly. Here is what I have so far: <div id= ...

Leveraging regex match.map to incorporate a React <img> tag within a given string

One of my recent discoveries involves replacing a string completely with React image elements, as demonstrated in the following code snippet: if (source.match(/\{([0-z,½,∞]+)\}/g)) { tagged = source.match(/\{([0-z,½,∞]+)\ ...

Recognition of the ng-click function in Ionic buttons can occasionally be unreliable

I am experiencing an issue with my Ionic app that wraps a web-app using Angular. Within the app, there are buttons coded like this: <ion-view view-title="Orders"> <ion-content scroll="true" overflow-scroll="true"> <div class="row"> ...

The value entered is being displayed twice every time the onChange event occurs in ReactJS

I recently implemented useReducer in my React project and encountered a strange issue where the values I type are being printed double and twice, as shown in the screenshot below. I'm unsure why this is happening. Here's a snippet of my code: im ...

Is it possible to create a functionality in Google Sheets where a cell, when modified, automatically displays the date of the edit next to it? This could be achieved using a Google

Here is the current code snippet I have: function onEdit(e) { var range = e.range; var val = range.getValue(); var row = range.getRow(); var col = range.getColumn(); var shift = 1; var ss = SpreadsheetApp.getActiveSheet().getRange(row, (col+ ...

Jquery Validation is not functioning properly in MVC using C#

I have been working on an MVC App and am currently trying to determine if a user is registered. To achieve this, I have created a model: public class Ejemplo { [Required(ErrorMessage="Please specify Username")] [DataType(DataType.Text)] public s ...

display alternative text before an image is loaded on the screen

Is there a way to display text instead of an image before the image loads? I have a website with an image as the title, causing the page to load fully before the title image is loaded later. Is there a solution for this issue? ...

Tips for preserving login status even after the browser is shut down with the help of JavaScript

I need help with maintaining a user session in my chat application even when the browser is closed. After users log in for the first time, I want their credentials to be remembered by the browser (I'm currently using local storage). How can I ensure ...

Struggling to transfer information between POST and GET requests in Node/Express

Just diving into node/express, currently developing a weather application that receives location data from a form submission <form method="POST" action="/"> <input id="input" type="text" name="city" placeholder="Search by city or zip code" /> ...

What is the best way to make the final character in the input placeholder appear in red?

Here lies my input field https://i.sstatic.net/0mJyJt.png, I'm striving to make the last character '*' appear in bold red rather than blending into the background. Despite numerous attempts, I haven't been successful in achieving the d ...

Is it possible to assign functions to each keystroke that does not correspond to a specific keybinding in Angular?

In Angular, there are events tied to keybindings or actions like (focus), (blur), (keydown), and more. You can bind specific keybinds to certain keys as well, such as (keydown.enter), (keydown.alt), etc. Is there a method to trigger an event only when it ...

Searching for entries using an array of _id along with other possible column values

const query_id = [1,2,3,4,5,6]; const query_type = "A"; let queries = await Query.find({ _id: query_id, query_type: query_type }); The current code functions as intended, but there may be a better and more elegant way to achieve t ...

I am experiencing difficulties with the React-router useHistory function

Currently working on a project involving react and nodejs. Utilizing window.location.href to redirect to another page upon successful login, however, attempting to use useHistory for redirection without updating is yielding an error message: Error Uncaugh ...