Removing CSS code from a theme using a custom theme

Question

Im not sure this is possible but I wanted to ask.

I have a theme installed and it adds alot of CSS to the search input which breaks a custom module that also works with the search input.

I cant just overwrite the CSS using a custom.less file, i actually want to remove certain parts from the themes CSS file. I can obviously delete lines of code from the themes own CSS files, but I was wondering if this can be done from a custom theme?

As an example, this code is in the themes CSS file;

.page-wrapper .page-header .header_right .block-search input {
    /* width: auto; */
    /* height: auto; */
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #5C5C5C;
    background-color: white;
    color: #5C5C5C;
    font-size: 12px;
}

Is there a way to delete this content (not overwrite it) from a custom theme?

Answer 1

Ok, so it turns out that you can overwrite the entire CSS file like you would any other type of file in a custom theme i.e. app/design/frontend/customtheme/modulename/web/css/filename.less

Magento will then use the custom theme css/less file over the one in the module or child themes

i.e.

.page-wrapper .page-header .header_right .block-search input {

}

The above would remove all of the content from that CSS block when the page loads.

Answer 2

Delete this css into the theme and also run the following commands:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento indexer:reindex

php bin/magento cache:clean

And then please check the your css is deleted.