Emphasis and dimension of form

I need help with a field that is supposed to have a black outline, similar to the one shown below:

However, here is what I currently have in my code:

.r{
    height: 40px;
    font-size: 30px;
    width: 100px;   
    font-family: 'proxima_novalight';
    outline: none;
    background: none;
    outline: 3px solid black;
}

Oddly enough, when I select the field, it appears smaller. Additionally, upon initial load, there's a grayish shadow-like outline around it. You can view a demo Here. Any suggestions on how to fix this issue?

htmlcssformsinputfield

Answer №1

To eliminate the "shadow," use border instead of outline:

.r{
    height: 40px;
    font-size: 30px;
    width: 100px;   
    font-family: 'proxima_novalight';
    outline: none;
    background: none;
    border: 3px solid black;
}

Check it out on JSBin: http://jsbin.com/cuwurowu/2/edit

Answer №2

The default border around the input element is known as the "shadow." To eliminate this shadow, simply add:

.r { border: none }

Keep in mind that removing the shadow may impact the overall dimensions of the element, especially when precise pixel layouts are crucial.

In Chrome, you may notice a shrinking effect (which is not present in Firefox or IE). This happens due to a default browser style setting outline-offset: -2px being applied to the focused element. The negative value of outline-offset reduces the distance between the outline and the outer edges of the element, resulting in a smaller outline. To resolve this issue, include the following code:

.r { outline-offset: 0 }

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

Is it necessary to utilize container or container-fluid within the grid system layout?

While similar questions may already exist on Stackoverflow, I believe the exact answer has yet to be found. Many suggest: "You should nest .col within .row, and ensure that .row is inside of .container." However, this concept still eludes me. I underst ...

javascripthtmlbootstrap-4

Implement PHP script to send email upon form submission with POST method in HTML

I am new to PHP and trying to set up mail functionality, but I'm facing a problem where clicking on the submit button opens a new window that displays part of my PHP code. My goal is to send an email from a user's email address to mine with the c ...

phphtmlemail

Rows Within Rows That Outsize Their Parent

I am having trouble with the Bootstrap 4 grid layout while working on Vertical forms. My goal is to place a col-lg-9(child) inside a col-lg-6(parent). For instance: <div class="form"> <div class="row"> <div class="col-lg-6"> ...

htmlbootstrap-4

When a selection element has a CSS box-shadow animation applied to it, it reverts to its default settings when expanded or clicked

A user notified me of an issue with a select element that has an animated box-shadow on it. I confirmed the problem on my work Windows computer, but unfortunately, I don't have access to a Windows setup at home for debugging. The select element in qu ...

htmlcssformscss-animations

Issues with centering background-position while using clip-path functionality

Struggling to center a background image? I initially suspected conflicting CSS rules, so I created a simplified demo to troubleshoot. After reviewing examples on SO and beyond, it seems like my approach is correct. Can anyone help identify what I might be ...

htmlcss

Ways to move the cursor to the search field after the placeholder text

I'm working on a Vue project with a small app featuring an input type search. The issue I'm facing is that the cursor appears at the beginning of the input, whereas I want it to appear after the placeholder text. How can I make this adjustment? ...

htmlcssvue.js

Three.js is currently rendering a blank canvas in pure white

After following the tutorial at , my browser only displays a white window. I attempted separating the files into js and html, but no luck. What I have already tried: experimenting with adding/deleting the nomodule parameter in the script tag utilizing a ...

javascripthtmlthree.js

The modal window obstructs my view on the screen

You are working with a modal form that triggers a POST method in your controller https://i.sstatic.net/0vbOy.png Here is the view code: <div class="modal fade" id="agregarProducto"> <div class="modal-dialog" role="document"> < ...

javascriptjqueryasp.net-mvcformsmodal-dialog

Leveraging the power of HTML5 alongside Angularjs and Node/Express within the MEAN.js boilerplate framework

I've decided to kickstart my app using the mean.js () boilerplate because of its built-in authentication/authorization features. However, I've hit a roadblock when it comes to incorporating HTML5 into my project. In my Angular app, I've en ...

javascriptangularjsnode.jshtmlexpress

Position the DIVs at the bottom of the TD

I'm having trouble aligning two DIVs within a table TD to the bottom of the table. Despite trying various alignment methods, the left DIV simply won't move. It's crucial for me to design this email responsively, ensuring it still displays co ...

htmlcssvertical-alignment

Interacting with dynamically loaded HTML content within a div is restricted

On my main HTML page, I have implemented a functionality that allows loading other HTML pages into a specific div using jQuery. The code snippet looks like this: $('.controlPanelTab').click(function() { $(this).addClass('active').s ...

javascriptjqueryhtmllazy-loading

Looking for a way to make CSS text color for a:hover have higher priority than a:visited?

I'm having an issue with my CSS code that changes the background color when hovering over a link. The text color is white on a blue background during hover, but if there is no hover, it's blue with a white background. Additionally, once the link ...

css

Issue with Angular custom tag displaying and running a function

I have created a custom HTML tag. In my next.component.ts file, I defined the following: @Component({ selector: 'nextbutton', template: ` <button (click) = "nextfunc()">Next</button> ` }) export class NextComponent{ nextfunc( ...

htmlangulartypescriptangular-componentscustom-tag

Designing Post Archive with Flexbox to create dynamic layouts

I am currently exploring different techniques to style my columns, and I have encountered an issue where if there are less than 4 posts in a row, there is extra space between each post. While I understand that floats can resolve this problem, I am searchin ...

phphtmlcsssassflexbox

Issues with table nesting functionality

I'm attempting to organize tables in a nested manner, instead of placing a table within each cell. My engineers have advised against simply styling the table to appear nested, and suggested that it would be more effective to wrap each header around th ...

htmlcsshtml-tablenested

Issue with submitting form using Jquery on select action

There seems to be an issue with this jquery code that is supposed to trigger a form submit when a drop down select is changed. It works fine on our test site, but once we move it to the live website, it breaks. Can someone help us troubleshoot and identify ...

jqueryhtmlasp-classic

Create a CSV document using information from a JSON dataset

My main goal is to create a CSV file from the JSON object retrieved through an Ajax request, The JSON data I receive represents all the entries from a form : https://i.sstatic.net/4fwh2.png I already have a working solution for extracting one field valu ...

javascriptjqueryhtmlajaxcsv

Ways to stop the thead from appearing on every page in a printout

Is there a way to prevent the thead of a table in an HTML page from being printed on all pages when a user initiates printing? The issue arises because I am using page-break-after: always; on an element before my table, causing the table header to also be ...

htmlcssprinting

Use JQuery to gradually decrease the opacity of divs individually

I am currently working on a function that fades out all divs except the one that has been clicked on simultaneously. However, I want them to fade out one by one instead. Additionally, I would like the divs to fade out in a random order. If anyone knows ho ...

javascriptjqueryhtmldelayfadeout

Issue with displaying PDF files on Google Chrome due to a software glitch

Recently, I encountered a puzzling issue on Google Chrome. I am not sure if the error lies with Google or within my code. When I set the div as display: none; and then show it again, the PDF view only shows a grey background. However, if I zoom in or out, ...

javascriptcssgoogle-chromepdf