Transform the CSS to a Mat-Form-Field containing a search box within it

I am currently working with Angular, Angular Material, and SCSS for my project.

Here is the front-end code snippet that I am using:

<mat-form-field  class="custom-form-field" style="padding-top: 5px;padding-bottom: 0px; line-height: 0px;">
    <input style="padding-top: 0px; padding-bottom: 0px;" matInput type="text" id="onSearch" (keyup)="keyUp($event)">
    <mat-icon matPrefix class="centered-icon">search</mat-icon>
</mat-form-field>

When I hover over the Search box, it displays a black bold outline, and when I click inside the search box, it shows a blue bold outline as seen in the following images:

https://i.sstatic.net/I1Gsi.png

https://i.sstatic.net/n0iTl.png

I have tried applying the following CSS to remove the outlines, but unfortunately, it's not working:

.mat-form-field input:focus {
  outline: none;
  box-shadow: none;
}

Can anyone guide me on how to make this textbox appear like a normal one without any bold outlines, similar to the image below?

https://i.sstatic.net/5N6CN.png

cssangularangular-material

Answer №1

To achieve the desired result in CSS, you can utilize properties such as border-color, color, and caret-color to ensure that the border always appears in black.

If you are facing issues with the border of your mat form field, try adding appearance="outline" to include an outside border.

<mat-form-field
  appearance="outline"
  class="custom-form-field"
  style="padding-top: 5px;padding-bottom: 0px; line-height: 0px;"
>
  <input
    style="padding-top: 0px; padding-bottom: 0px;"
    matInput
    type="text"
    id="onSearch"
  />
  <mat-icon matPrefix class="centered-icon">search</mat-icon>
</mat-form-field>

styles.css

.custom-form-field .mat-form-field-outline-thick,
.custom-form-field
  .mat-form-field-appearance-outline.mat-focused
  .mat-form-field-outline-thick {
  border-color: black !important;
  color: black !important;
  opacity: 1 !important;
}
.custom-form-field .mat-input-element {
  caret-color: black !important;
}

Check out the solution on stackblitz -> cd test -> npm i -> npm run start

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

Guide to setting up a node.js server that serves HTML files with CSS styling

I am currently working on setting up a simple node.js server for my HTML using http and express. Everything is functioning properly, but the CSS is not displaying as expected. Here is the code snippet for my server setup: const express = require("express ...

htmlcssnode.jshttpserver

Basic Jquery CSS style requests

Can you help me troubleshoot this issue? var hover = $('<img />').attr('src', hovers[i]).css('position', 'absolute') I'm having trouble getting th ...

jquerycss

The beginning of an HTML document and the viewport (screen view) location

Absolute positioning is relative to a containing block that provides a positioning context, which defaults to the document. a) If absolute positioning is relative to the document, can we visualize the starting point of a document as a two-dimensional coor ...

htmlcssxhtml

When I run ng build, an error code ".form-floating>~label" pops up

After running the command "ng build" in my Angular app, I encountered the following output: ✔ Browser application bundle generation complete. ✔ Copying assets complete. ⠋ Generating index html...4 rules skipped due to selector errors: .form-floatin ...

angularbuildcompiler-errorsbootstrap-5

Unlock the Potential: Empowering Users with Nativescript Firebase Sign

Recently, I embarked on the journey of developing apps using NativeScript and Angular. Looking for a reliable database source, I decided to go with Google Firebase. Successfully migrating my SQL data to the Firebase real-time database, I am now able to s ...

angularfirebaseangular2-nativescript

The container or row I placed in the middle of the page content is not anchored to the bottom like it should be for footer widgets

I'm struggling with the code I've extracted. How can I move the footer widget to the bottom of the page? On some pages, the footer displays at the bottom because there isn't much content, but on one specific page, it appears in the middle of ...

csswordpresstwitter-bootstrap

Adjustments in margins for printed HTML may vary from page to page in Internet Explorer versions 8 to 11

One challenge I'm facing is with a user-generated report page that is typically printed. There seems to be an unusual bug occurring specifically in Internet Explorer. The layout of the page consists of tables within various divs, all aligned perfectly ...

htmlcss

Angular 2 fails to redirect to a 404 page if both the route parameter and address are not valid

Currently, while working on my application with Angular 4.1.1, I have a habit of declaring routing in every module I create. For instance, in the file new-cars.routing.module.ts: import { NgModule } from '@angular/core'; import { RouterModule, ...

javascriptc#angulartypescriptasp.net-core

Navigating with optional parameters appended to the query string

I am faced with a situation where a search can only be performed based on one value at a time (id, age, or sex). If I utilize the following route where only the id is passed, this.router.navigate(['details'], { queryParams: { ...

angularangular-ui-router

Using shadow effects on the <Grid> component with Material UI

Is there a way to implement the box-shadow property on a <Grid> component in Material UI? I've gone through the official documentation regarding Shadows - Material UI, but I'm struggling to grasp how it can be applied to a <Grid>. De ...

cssreactjsmaterial-ui

"Uh-oh! Debug Failure: The statement is incorrect - there was a problem generating the output" encountered while attempting to Import a Custom Declarations File in an Angular

I am struggling with incorporating an old JavaScript file into my Angular service. Despite creating a declaration file named oldstuff.d.ts, I am unable to successfully include the necessary code. The import statement in my Angular service seems to be worki ...

angulartypescripttypescript-typings

Achieving unique horizontal and vertical spacing in Material UI Grid

In my current Material UI setup, I have set spacing in the Grid Container to space Grid Items vertically. While this works well on larger screens, it causes awkward horizontal spacing between Grid Items on mobile devices. <Grid container spacing={24}> ...

cssreactjsgridmaterial-ui

Is there a way to access the value of a variable from a .ts file within a .scss file?

Utilizing a css-only pie chart, I am looking to incorporate the value of this.performance in my scss to determine the percentage. How can I manipulate my scss file from .ts file? Below is a snippet of my css code in scss: $configs: ( chart-one: ( sv ...

angularionic-frameworkionic2

Is there a simpler and more refined approach for handling Observables within RxJS pipelines?

Picture this: I have an observable that gives me chocolate cookies, but I only want to eat the ones without white chocolate. Since I am blind, I need to send them to a service to determine if they are white or not. However, I don't receive the answer ...

javascriptangulartypescriptrxjs

Center the R Shiny showNotification on the screen

Currently, I'm exploring ways to customize the feature of showNotification() in Shiny. Link to example notifications My goal is to have the message appear at the center of the screen instead of the bottom-right corner. While it doesn't seem pos ...

cssrshinyshinydashboard

Utilizing an Image as a Link in the Background

I am working on a way to convert the CSS background image I have into a clickable link that can be referenced. Here is my CSS code: #wrapper { height: 100%; padding: 66px; } #ad_11 { background-image: url(images/index1.png); display: block; text-indent: ...

htmlcss

The toggling feature seems to be malfunctioning as the div section fails to display

I'm facing an issue with my Django project while working on a template. I want to toggle the visibility of a div element between hiding and showing, but the function I used isn't working for some reason. I borrowed the function from a different t ...

javascripthtmlcssdjango

The Authentication Key (FCM Token) was not provided in the request. For further details, please consult the "Authentication" section in the FCM documentation

When sending Firebase notifications from my NativeScript app using the Angular HTTP post module, I sometimes encounter an error stating that the request is missing an Authentication Key (FCM Token). The FCM documentation provides more information on this. ...

angularnativescript

If one sibling requires flexing, apply flex to all siblings

Illustrative Issue: large: https://i.sstatic.net/oq0jA.png small: https://i.sstatic.net/WXqmV.png When space is limited, one row will start to flex while others remain static if they have enough space. Is there a way to make all rows flex when at least ...

htmlcsssvgflexboxcss-grid

Achieving a Full-Screen Three.js Canvas in React: A step-by-step guide on spanning the view height and width of a webpage

I've been working on tweaking the code found in this particular example: How to connect Threejs to React? This is the snippet of code I am focusing on: import React, { Component } from 'react' import * as THREE from 'three' clas ...

javascriptcssreactjsthree.js