Apply the CSS style to make one element identical to another, while modifying a single property

I am currently working with the following CSS:

input[type="text"]
{
    border: 2px solid rgb(173, 204, 204);
    height: 31px;
    box-shadow: 0px 0px 27px rgb(204, 204, 204) inset;
    transition:500ms all ease;
    padding:3px 3px 3px 3px;
}

My goal is to apply these same properties to a textarea element, except I do not want to specify a height for it.

Is there a way to inherit the CSS styles and remove a specific property without having to rewrite the entire block?

Answer №1

Begin by applying the initial rule to both elements, then implement a secondary rule that overrides the height attribute specified in the first rule.

input[type="text"], textarea
{
    border: 2px solid rgb(173, 204, 204);
    height: 31px;
    box-shadow: 0px 0px 27px rgb(204, 204, 204) inset;
    transition:500ms all ease;
    padding:3px 3px 3px 3px;
}
textarea {
    height: auto;
}

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

Using inline JavaScript to style an element when clicked

Looking for assistance with styling a link. I've connected an external stylesheet to my HTML file, so that part is all set. The goal is to modify the text-decoration when the onclick event occurs. Here's what I currently have: <a class="dopel ...

What's the best approach when it comes to declaring CSS in an HTML document: should you

I have a quick question about HTML and CSS. Recently, I started using Twitter's Bootstrap framework and added this code snippet to the head of my index.html file: <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" re ...

The table is not properly displaying within the parent scrolled div due to issues with the fixed positioning

Apologies for any language barrier. I am encountering an issue with a PHP page that includes a table meant to be displayed as position:fixed; however, it consistently appears above the scrollbars and does not stay within the parent div. View screenshot he ...

Adjust the size of a div element after updating its content using Mootools

I am currently utilizing mootools 1.2 on a basic webpage. There is a div that contains a form (referred to as formdiv) which is submitted through JS/ajax. Once the ajax request returns a "confirmation message" data, the formdiv updates accordingly. The is ...

What is the best way to apply a :visited selector specifically to the most recently visited webpage?

I've noticed that all the pages I've visited on the site have now changed to the color I chose. However, my goal is for only the last page I viewed to be in the color I assigned. Thank you! ...

Ensuring Navigation Elements Remain Aligned in a Single Line

I'm in the process of developing an interactive project that will be showcased on a touch screen. One of its key features is a fixed footer navigation. Currently, I am using floats to position the main navigation elements and within each element, ther ...

Toggle visibility with JQuery's onClick event

I am looking for a way to toggle the visibility of text that has display: none; in CSS when a button is clicked, as well as clear the input field on the onClick event. Currently, the text remains visible even after it has been displayed. Any assistance wou ...

Aligning items in the header bar with floating <li> elements

I'm struggling with centering an element in the header bar of my website. I currently have a single header bar at the top, and inside the <header> tag, there's an unordered list with some items floating left and one floating right. Now, I w ...

The Mui Switch track color fails to change when checked

I'm looking to customize the colors of the track for both checked and unchecked states. Currently, the track color is working for the unchecked state but defaults for the checked state: Checked State: https://i.stack.imgur.com/eGV4a.png Unchecked S ...

The stunning fade effect of Magnific Popup enhances the visual appeal of the inline gallery

I'm currently using magnific popup for an inline gallery, but I'm not seeing any effects. I would like to have a fade effect when opening/closing the popup. Can someone assist me with achieving this? https://jsfiddle.net/gbp31r8n/3/ [Check o ...

Is there a way to ensure that my text is centered on top of an image while maintaining responsiveness?

I'm trying to make the text adjust its center to the height of an image that changes size when the page is resized. Here's what I have so far: HTML <section id="eyeCatcher"> <div id="catchContainer" > <div id="eyeCatchQ ...

The website functions perfectly on a local server, but once it's uploaded, the images fail

My website is functioning properly on my computer, however, after uploading it to the server, I noticed that some of the links are not appearing. Upon inspecting these links through developer tools, it shows an image size of 'Natural 1 X 1' despi ...

Generate dynamic lines with evolving hues using CSS3

While working on a fresh web project, I came across the need to emphasize my headers (h1, h2, h3, h4) with underlines. My goal is to have these underlines grow and change color dynamically, similar to what can be seen here: . Is there a way to achieve thi ...

Adjust the border hue of the MUI disabled outline input

I am currently struggling to locate the exact definition of this border color. After inspecting the dom, I cannot seem to find any border style within the input component or its pseudo elements... My main goal is to slightly lighten the color of the input ...

What's the reason behind this file not opening?

When I try to insert this code into files index.html, style.css, and app.js, the page refuses to open. The browser constantly displays a message saying "The webpage was reloaded because a problem occurred." I am using a MacBook Air with macOS Big Sur and a ...

What is the best way to trigger card opening - through clicking or hovering?

Once the Set tag/status button on the left is clicked, I aim to display a card similar to this one on the right side. What would be the best approach to achieve this in React? Should I use regular CSS, Material UI, or React-bootstrap? https://i.stack.img ...

Two elements failing to display side by side

Can someone help me figure out how to align the quantity and Add-to-cart button on the same line? The quantity is displaying as a block element even though I set it as inline... any suggestions would be appreciated! Visit this link for reference. I' ...

Tips for designing a sleek and seamless floating button

I attempted to implement a floating button feature that remains in view while smoothly flowing using jQuery. I followed a tutorial I found online to create this for my website. The tutorial can be accessed at this link. However, after following all the ste ...

CSS code causing issues with table cellpadding functionality

I am currently working on a webpage that is utilizing a pre-existing stylesheet. This particular stylesheet includes the following style rules: table { border-collapse: collapse; } th, td { padding: 0; } My challenge arises when I attempt to cre ...

Can you explain the process of gathering texts based on CSS selector?

I wanted to place texts next to the div-class as shown in the following code snippets. <div class="review-contents__text">소재가 좀 저렴해 보이지만 그래도 입으면 휠씬 나아보여요</div> Initially, I wrote a code ...