While browsing a website, I noticed something intriguing:
Upon clicking on it...
How did they achieve this effect? It's not just a simple solid border, but more intricate. I examined the source code extensively but couldn't locate anything relevant in the CSS or JavaScript.
The website where I found this is:
I suspect it might be a :focus effect, but my search didn't yield any results in the source code...
Any thoughts?
Extracted from the origin of the specific element on the page you are referencing:
input[type="text"]:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted 9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
This information was obtained using Chrome by forcing the element into focus-state and then examining the applied CSS-rules. In Chrome Devtools, you can right-click on any DOM-element in the inspector and select "Force element state" -> ":focus"
Additional information: It appears that the webpage is constructed utilizing the widely-used UI-framework Twitter Bootstrap.
Seems to be a component of the Bootstrap framework.
.fancy {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
display: inline-block;
height: 20px;
padding: 4px 6px;
margin-bottom: 10px;
font-size: 14px;
line-height: 20px;
color: #555;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancy:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted 9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
The CSS3 box-shadow property is being utilized for the text box design. By applying the following CSS code, a shadow effect will be added to all text boxes when focused:
input[type^="text"] {
background: #fff;
border: 1px solid #0077cc;
border-radius: 5px;
padding: .2em;
outline: none; /*Prevents Chrome from adding a yellow border around the textbox*/
}
input[type^="text"]:focus {
box-shadow: 0px 0px 10px #0077cc;
}
While working with Bootstrap 5 and using paddings in columns, I encountered issues when some of my columns had backgrounds or when adding an embed element. How can I create margins in such cases? https://i.sstatic.net/EhF7y.png To address this issue, I i ...
My goal is to create a functionality where clicking an image will toggle the window.location url between '#' and '#footer'. The current code I have for this is: <script> function clickarrow(){ var rd=Math.floor(Math.random() ...
Struggling to retrieve data from mongoDB and send it to the client side using res, but I keep getting undefined. Can anyone offer some assistance? Thank you all! //// server.js app.get('/user/show', userController.userList); //// controller cons ...
Recently, I noticed that certain websites incorporate a CSS tag such as style.css?ver=1. Can you explain the significance of this? What exactly is the purpose of adding ?ver=1 to the CSS tag? Could you provide instructions on how to implement this in cod ...
Currently, I am working on creating a design with 3 boxes stacked vertically and then adding an image to it. You can see the example below: https://i.sstatic.net/jViO.png I have successfully implemented this layout, but I am facing an issue where the box ...
Currently, I have implemented the following script: jQuery.each(jQuery('textarea[data-autoresize]'), function() { var offset = this.offsetHeight - this.clientHeight; var resizeTextarea = function(el) { jQuery(el).css('h ...
Upon inspecting a page, I am implementing a script to check if a checkbox is selected. If not selected, the goal is to hide a specific div element. While troubleshooting this issue, I suspect the problem may be due to the lack of an inline element within t ...
When using PayPal Standard HTML form, upon completion of the transaction, the user is directed to the return URL. To retrieve variables such as the user email, order number, and other available information using PHP, I need to utilize the GET method from t ...
I am having trouble adding a class based on a condition <tr *ngFor="let time of times; let i = index"> <td [ngClass]="{'red-time':checkInvalid(time['Proles Arrive'])}">{{time['Proles Arrive']}}</td& ...
Step-by-Step Guide: Determine if your browser supports the use of localStorage Check if localStorage has any stored items Find out how much space is available in your localStorage Get the maximum storage capacity of localStorage View the amount of space ...
An error message has appeared stating: Uncaught SyntaxError: Unexpected token : This error relates to the following line of code: data: userCoupon: $('#couponCode').val(), Here is the script in question: $(function() { $("#signInButton2"). ...
I am looking to implement an event listener that triggers whenever a new element is added to the document or any of its children. Can someone recommend a method for accomplishing this? ...
My goal is to have the stylesheet URLs stored in a database and be able to change the stylesheets' href using variables in HTML tags. However, when I tried the following code, nothing happened: global $theme_addresss; global $showdetail_dbtadbiruse ...
I need to change the CSS display property from none to block using JavaScript, but only for Internet Explorer. My current code is not working for the ID #backfill-image. <script> function checkForIE() { var userAgent = navigator.userAgent; ...
I am facing an issue in angular where a button works perfectly fine with one click on larger screens, such as Macbook. However, on iPhone, it requires a double click to function properly (it works fine on Android too). The alert triggers with a single cl ...
After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...
I've encountered these errors although the values are displayed correctly in the browser. I'm unsure about how to resolve this issue. ERROR TypeError: Cannot read property 'length' of undefined ERROR TypeError: Cannot read property &ap ...
After setting the border width of these input boxes to 1px, it appears that on iOS devices, the top border seems larger than intended (regardless of the browser being used). Interestingly, on any other type of device, the border looks perfectly fine. & ...
After working on this project for about four months, everything seems fine in the development version. However, once I build the project and upload it to the server, some of my styles are not applied. For more information, I have imported styles both in c ...
As a newcomer to web design, I have implemented the "Product-Quick-View" plugin from CodyHouse on my website. Upon clicking the DEMO button and inspecting the code, you will find the following: <body> <header> <h1>Product Q ...