Get rid of the standard shadow located on the bottom and right of the input text field

My input fields have some border rounding and are displaying an unwanted shadow on the right and bottom. I've tried using the box-shadow property to control the width, color, and other properties of the shadow, but it's not working as expected. How can I style or remove this mysterious shadow that isn't affected by the box-shadow property?

.options {
    width:40px;
    text-align:center; 
    margin-left:30px;
    border-radius: 5px;
    border-style:outset;
    box-shadow: none;
}
<input type="text" class="options" id="3" name="1" value="3" readonly>

Fiddle

htmlcss

Answer №1

When it comes to the CSS property border-style:outset, the default behavior is displayed. To change this, consider using a solid border style instead.

.options {
    width:40px;
    text-align:center; 
    margin-left:30px;
    border-radius: 5px;
    border: solid 1px grey;
}
<input type="text" class="options" id="3" name="1" value="3" readonly />

Answer №2

To update your class, consider adding either border:none; or border:1px solid grey;

.options {
    width:40px;
    text-align:center; 
    margin-left:30px;
    border-radius: 5px;
    border-style:outset;
    box-shadow: none;   
    border:none;
}

Alternatively

.options {
        width:40px;
        text-align:center; 
        margin-left:30px;
        border-radius: 5px;
        border-style:outset;
        box-shadow: none;   
        border:1px solid grey;
    }

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

Engaging JavaScript Navigation

I am looking to create an interactive JavaScript menu or image map where users can press down, highlight, and hit enter on four different items to reveal hidden messages. However, I struggle with JavaScript and could really use some assistance. I have alr ...

javascripthtmlcss

A method to apply a class to the third <li> element using javascript

Can someone help me figure out how to add a class to the third element using Javascript? Here is the structure I am working with: <ul class="products-grid row four-columns first"> <li class="item"></li> <li class="item"></li&g ...

javascriptjqueryhtmlcss

Show a pop-up window when a button is clicked, just before the page redirects

Is there a way to display a popup message before redirecting to another page when clicking on a button? Here's the scenario: <a href="addorder.php?id=<? echo $row01['id']; ?>" ><button id="myButton" class="btn btn-primary btn ...

javascriptjqueryhtmlajax

How can I extract data from a link using Python?

Currently, I am working on a Python program to extract the rating of a movie from one of my preferred websites. Here’s an example link to a review: Right now, I am using string.partition commands to retrieve sections of the source HTML code that contai ...

pythonhtml

What are the risks associated with allowing user-generated HTML or Javascript code on a website?

Is it really dangerous to allow users to edit HTML with Jinja2 templates and access some server-side variables that will be rendered later? I know Google uses Caja Compiler to sanitize and sandbox HTML served from Google Apps Script. Should I be concerned ...

javascripthtmlsecuritysandboxjinja2

Modifying images through resizing and scaling within a flexible web application to accommodate different screen dimensions

With my web application, I have an image that changes in sizes as it calls a different image from the database each time it is viewed. My goal is to make sure this image is displayed responsively on different devices. For smartphones, I want the image to f ...

htmlimagecssresizeresponsive-design

Angular 8 form controls becoming unresponsive while the list is being loaded

Hello, I am currently experiencing an issue in Angular. I have a page with a basic Angular form and two independent components that load lists from an API (comments with 500+ records and posts with 500+ records). The Problem: While trying to enter values ...

htmlangularangular5angular7angular8

Retrieving properties of objects using HTML Select

Scenario: I encountered an issue while trying to access a specific property (code) of a ng-Model object called myRide. I initially attempted to achieve this by <select ng-model = "myRide" ng-change = "getCode(myRide.code)"> ...and within the ...

htmlobjectangularjs

Unknown CSS element discovered: bootstrap, gradient, carousel

I recently created a random quote app using javascript, jQuery, and bootstrap on Codepen. Everything worked perfectly there. However, when I organized the files, pushed them to git, and tried to view the app from Safari, I encountered some warnings and t ...

javascriptjquerycsstwitter-bootstrap

The :after pseudo-element in action with multi-line text

Can the styling of the :after pseudo-element be applied to every line of multi-line text? Here is the code I am currently using: .container { width: 50px; } .text { position: relative; } .text:after { content: ''; position: ...

htmlcsslayoutpseudo-element

When the div is loaded, automatically navigate to the crucial li element within it, such as the one with the class "import

Welcome to my first webpage: <html> <head> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div id="comment"></div> <script type="text/ja ...

javascriptjqueryhtmlscrollload

CSS changes on child elements cause conflicts with parent hover effects

I've come across the following html code : .logo { display: inline-block; width: 30px; position: absolute; top: 50%; opacity: 0; transition: 0.6s; } .container:hover .logo { opacity: 1; transition: 0.6s; } .container:hover .pictur ...

htmlcss

Ways to create a transparent parallax background

Currently, I'm tasked with developing an educational website using HTML and CSS for a school project. Unfortunately, due to restrictions on code.org, I cannot utilize JavaScript files or script tags. Despite successfully implementing a parallax effect ...

cssbackgroundprojectparallax

What are the steps to implement email validation, Saudi mobile number validation, and national ID validation in cshtml?

Looking to implement validations for the following fields: email, mobile number (must be 10 numbers and start with 05), and National ID (must be 10 numbers and start with 1 or 2) <input class="form-control" type="text" id="txt ...

javascripthtmlcssasp.netasp.net-mvc

Place the first paragraph within a div above another paragraph in the same div

Presently, I have this item: https://i.stack.imgur.com/0dBd9.png however, my objective is to achieve this look: https://i.stack.imgur.com/NEBZf.png The code snippet in question is as follows: .bonus-div { width: 290px; height: 29px; ma ...

htmlcss

Unable to show <LI> elements

I'm having trouble adding LI items to the #historial <UL> tag. Whenever the for loop is inside the function, the list displays with some elements duplicated. I believe the for loop should remain outside of the function. Could someone please he ...

javascripthtmldom

"Interactive feature allowing database updates on a web page without the need for a page

I have a like button that contains an ID pulled from a database. My goal is to click the like button, update the database, and then switch it to unlike without having to reload the page. Below is the code for clarity: **index.php: ** <script type=&quo ...

phphtmlajax

What is the best way to disable the functions doajax_red and doajax_blue when a radio button is checked?

Is there a way to halt the functions doajax_red and doajax_blue when a radio button is checked? Upon loading the page index.php, clicking the red button will display a loading image. If you check the BLUE radio button and then re-check the RED radio butt ...

javascriptphpjqueryhtmlcss

Enhancing Visuals with src="imageUrl within Html"

Is there a way to customize the appearance of images that are fetched from an API imageUrl? I would like to create some space between the columns but when the images are displayed on a medium to small screen, they appear too close together with no spacing. ...

htmlangulartypescriptbootstrap-4sass

Tips on setting the ajax parameter contentType to "html"

I'm encountering an issue where the variable "myvariable" is passing as null. Can anyone provide guidance on what I might be doing incorrectly? $.ajax({ type: "POST", url: "/MyController/MyAction", data: JSON.stringify({ items: my ...

jqueryhtmlajax