What is the reason behind the drop shadow effect working on input elements but not on div elements?

Notice the difference in styling between an input element and a div element:

.test {
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border: 1px solid black;
  height: 20px;
}
<input class="test" />

This is because a div element has different default properties as shown below:

.test {
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border: 1px solid black;
  height: 20px;
}
<div class="test"> </div>

The reason behind this inconsistency might be due to the default CSS settings for each element type.

htmlcss

Answer №1

Your code is functioning properly, the issue lies in the transparency of the background. To make the drop shadow visible, consider assigning a background color to the div.

.sample {
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border: 1px solid black;
  height: 20px;
  background-color:#fff;
}
<div class="sample"></div>

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

Tips for setting a Bootstrap 3 dropdown menu to automatically open when located within a collapsed navbar

Is there a way to have my dropdown menu automatically open when the collapsed navbar is opened? Take a look at this example I created in a fiddle to see what I'm working with so far. Right now, when you click on the navbar in its collapsed state, two ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

How can I combine HTML and CSS in a single request using the sendFile method in Express?

const app = require('express')(); app.get('/', function(req, res) { res.sendFile(__dirname + "/" + "index.html"); }); <link rel="stylesheet" href="style.css"> I utilized the Node.js code above to send an HTML file. In order to ...

htmlcssnode.jsexpresssendfile

What are the steps to modify data within the root component?

I am currently working on a Vue project with vue-cli and routes. In my App.vue file, the template structure is as follows: <template> <div id="app"> {{Main}} <router-view></router-view> </div> </template&g ...

javascripthtmlvuejs2vue.js

encountering difficulty incorporating menu.php within main.php

I'm currently working on integrating the menu.php file into my main.php. Here is what I have accomplished so far: Main.php <html> <body> <?php include("menu.php"); ?> <p>This is an example to demonstrate how ...

phphtmlinclude

Does the order property in flex have a specific starting and ending point?

I am curious to know if there are specific start or end numbers for ordering elements within a flex container. For instance: .firstOrder { order: <First-Item> } Why do I ask? Well, I am in the process of developing a CSS framework and I would l ...

cssflexbox

Tips for incorporating and altering 3D objects within HTML

Currently, I am involved in a web project that incorporates a 3D map, and I am curious about the most optimal and straightforward method to import the map and interact with various objects by clicking on them. Ideally, this action would trigger a JavaScrip ...

javascripthtml3dwebgl

I'm currently on the hunt for the most efficient method of parsing through HTML code

Currently, I am developing a school application that reads the subject name and class name to determine attendance. The goal is to calculate the attendance rate for each school subject throughout the year. This piece of code represents just one day, but I ...

pythonhtmlpython-3.xparsingbeautifulsoup

Left-align switch labels in Bootstrap 4 for a clean and organized look

Here is the code snippet that I am currently working with: .custom-switch { padding-left: 0; } .custom-switch .custom-control-label { left: 0; padding-left: 2.5rem; } .custom-switch .custom-control-label::before { top: 0.125rem; left: 0; ...

htmlcssbootstrap-4

Steps for removing form validation from non-conditional formControls

My issue is with a form-control that displays a success mark after submission, even though there are no validation conditions in place. Is there a way to disable this validation? <Form noValidate validated={validated} onSubmit={e => this.ha ...

cssreactjsreact-bootstrap

Exploring the Possibilities of Combining Hover Effects with Unique CSS

I'm encountering difficulties making the :hover state work with a CSS pie slice that I created. Using transparent borders and the border-radius property, I managed to style my div to resemble 1/4 of a pie. But no matter what styles I attempt for the h ...

htmlcss

Failure to connect HTML and CSS files

My HTML and CSS files are not linking even though they are in the same folder. Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl ...

htmlcss

What is the best way to retrieve the targeted style directly from CSS, rather than relying on the computed style of the element?

Although similar questions have been posed before, such as this one, I haven't found a working solution. Is there a way for me to retrieve the width attribute value from a CSS class and then write it to a div? I'm looking to access the exact va ...

jquerycss

Creating a JSON object from Bootstrap HTML using jQuery

Currently, I am working on a straightforward FormBuilder that allows users to create text fields and rearrange their order effortlessly. Using jQuery, all the HTML elements are generated dynamically. My next goal is to produce a JSONObject based on the HT ...

jqueryjsonhtmltwitter-bootstrapdynamic

Adjust the white background to match the gray background seamlessly

I'm in the process of developing a forum and encountering some challenges with CSS. My goal is to extend the white area all the way to the right edge of the gray background, leaving a gap of around 5px/10px. I've experimented with different CSS ...

htmlcss

Fluid container with two columns using Bootstrap 3's container layout

I am currently working on designing a container with a two-column layout using the container-fluid class for background color and image requirements. Inside this container, I have included a container class to ensure that the content aligns properly with n ...

htmlcsstwitter-bootstrap-3

Modification of file types (HTML input[type=file])

Is it feasible to generate a new file of a specific type from the currently uploaded file in the input? After uploading a file, I attempted to modify its type directly within an onChange event but received an error stating that it is a read-only property ...

javascripthtmlreactjs

Creating whimsical freehand drawings using the 'pixie' feature in fabricjs

I am currently working on developing an 'Eraser' tool for my drawing application based on fabric.js. The goal is to create a free drawing app with a 0.5 opacity where the background image remains visible through the drawings. However, I have rea ...

htmlcanvasfabricjs

The seamless integration of an HTML dropdown list in a form with a PHP email feature

Take a look at this HTML code snippet with PHP integration. How can I achieve this? I'm fairly new to coding. I'm currently developing a contact form that includes a dropdown menu for selecting an email address related to a specific physician. I ...

phphtmlphpmailer

The data-ng-bind directive cannot be used with the <option> tag

Currently, I am in the process of learning angular and encountered a problem that has me stuck. Upon researching on AngularJS : Why ng-bind is better than {{}} in angular?, I found out that both {{}} and ng-bind are said to produce the same result. However ...

javascripthtmlangularjsng-bind

Load Ajax plugin to cache for saving

I have implemented a code on my website to dynamically change content and load specific plugins for each page using the following AJAX call: $.ajax({ url: urlPath, type: 'GET', success: loadContent //content and plugins are loaded through ...

javascriptjqueryhtmlajaxcaching