Switch up the border color of the input in PrimeNG

Currently, I am utilizing PrimeNG with Angular and seeking to modify the shadow of the input box upon focusing it. Presently, it appears as follows:

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

My preference is to change that blue portion to green. Upon reviewing the documentation, it instructs me to adjust the p-inputtext class. However, despite my efforts, the desired outcome has not been achieved. This is my current approach:

body .p-inputtext{
    border-color: green !important;
}

Outcome:

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

Although it successfully renders the green border, the blue part remains unaffected. How can this be resolved?

cssangularprimeng

Answer №1

This is how I successfully resolved the issue

span > .p-inputtext:enabled:focus{
    border-color: #4D80CA !important;
    box-shadow: 0 0 0 0.02rem green !important;
}


span > .p-inputtext:hover{
    box-shadow: 0 0 0 0.02rem green !important;
}

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

Creating a Masonry Gallery without any spacing between images

I'm looking to create a unique masonry gallery design that eliminates any gaps between images. I've experimented with various plugins like masonry and isotope, but they still leave gaps in the layout. Packery seems promising, however it tends to ...

jquerycssjquery-isotopemasonrypackery

Guide to setting up the angular2-dropzone-wrapper package

My attempt to implement angular2-dropzone-wrapper from https://github.com/zefoy/ngx-dropzone-wrapper is encountering difficulties. Here's what I've done: npm install angular2-dropzone-wrapper --save After executing this command, a new folder c ...

angulardropzone.js

Can you customize the background color for the entire section where the first child appears in a nested collapsible list with CSS?

In my current setup, I have a nested list within a larger container box. Each ul element has a border-top style applied, while each li element has a border-bottom and padding. The HTML code looks like this: <div class="menu"> <ul ...

javascripthtmlcss

How to position a div in the center of the screen with an overlay

While this code functions well in Firefox, it unfortunately does not work in IE. I am seeking a solution to properly center the div on the screen - Currently, the div is leaning too much towards the bottom In addition, I require the div with an id of "l ...

javascriptjquerycssinternet-explorer

The Angular Library integrates parent application modules into its structure

Is it possible for an Angular application to inherit a service from the core application and utilize its functions? In my core application, I have several libraries and I require all of them to be able to utilize a specific service from within the core ap ...

angular

Is the primary color modification in Bootstrap failing to take effect?

Currently, I am working on a react app and I have successfully integrated Bootstrap React. One of the tasks I wanted to accomplish was changing the primary color from the default blue to a different shade. To do this, I navigated to bootstrap/scss/variabl ...

cssreactjsbootstrap-4

Angular2+ allows users to easily drag and drop an image onto the screen, complete with

Check out this stackblitz link for more details: https://stackblitz.com/edit/angular6-ledera?file=app%2Fapp.component.ts I'm attempting to drag an image from the desktop and drop it directly onto the dropzone div. 1) Obtain a preview of the image 2) ...

javascriptangularhtmldrag-and-dropimage-upload

Clicking the mouse will eliminate the input's focus

I have an input element with type radio. When the element receives focus via keyboard, it should display a focus style, but when accessed via mouse click, the focus should be removed. I want to achieve this without using JavaScript or jQuery. This element ...

htmlcsssassbootstrap-4

Organize rows in the table while maintaining reactivity

A challenge I'm facing with a web app (Angular SPA) is that it displays a large table without the ability to sort. To work around this issue, I've managed to implement sorting via the console. However, re-inserting the rows after sorting causes t ...

javascripthtmlangular

Integrate automatic column spacing in Bootstrap grid system

Is there a way to automatically add spacing between Bootstrap columns? For example, if I have a column with a width of 5 and another with a width of 4, the offset should be 3. How can this be achieved? ...

htmlcssbootstrap-4bootstrap-5

Completely shrink the middle row first when resizing the browser before shrinking the other rows

Utilizing a simple three row structure: <div class="EditorHeaderWrapper"> <h1>Title</h1> </div> <div class="EditorMainRowWrapper"> // Content of the main row goes here </div> <div class="EditorFooterWrapper"> ...

htmlcss

Executing API calls sequentially in Angular using RxJS

Let's say I have 3 services being called in app.component, each service subscribing to its own response. How can I ensure that I receive the responses one by one? Here is a snippet from app.component.ts: ngOnInit() { this._salesstageService.refres ...

angularrxjsangular-services

Images fail to appear on Github pages

Check out my GitHub page at You can also view the repository here: https://github.com/chryspenalber/hercules I'm encountering an issue where the images inserted through CSS are not showing up on the GitHub page, although they display fine on localho ...

htmlcssgithub-pages

Is there a way to trigger both the link and the div element simultaneously?

Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...

htmlcssbuttonhover

SonarQube flagging a suggestion to "eliminate this unnecessary assignment to a local variable"

Why am I encountering an error with SonarQube? How can I resolve it since the rule page does not offer a specific solution? The suggestion is to eliminate the unnecessary assignment to the local variable "validateAddressRequest". validateAddress() { ...

javascriptangulartypescriptsonarqubeangular8

Getting systemjs to load a module from a CDN in global format: The ultimate guide

I keep encountering the following error: EXCEPTION: ReferenceError: cast is not defined in [null] To create a custom Chromecast receiver application, you need to utilize a specific js file that exposes the necessary functionality through a global 'ca ...

javascripttypescriptangularchromecastsystemjs

Angular router - utilizing empty data object for child routes

My angular router needs to use the same component for both the parent and child routes, while passing data to differentiate between them. The issue at hand: The child route is not recognizing any data from the sub-route. Segment of the routing module def ...

angularangular-router

Vue CLI ESLint adds extra space to multiline blocks

Working on a project set up with the VUE CLI and default settings in VSCode, I'm struggling with formatting a list at the end of a string. If I use this code: <span v-if="fruits">(<span v-for="(fruit,index) in fruits" :key="index">{{frui ...

htmlcssvue.jsvisual-studio-codeeslint

Encountering a problem with chartjs-plugin-annotation in Angular 9

I'm facing a challenge while attempting to create a vertical line on my ng2-charts chart. To accomplish this, I installed the chartjs-plugin-annotation package. However, it seems to be malfunctioning and I am unable to identify the root cause of the i ...

angulartypescriptchart.jsng2-chartschartjs-plugin-annotation

Maintaining the position without altering the width of the site

Having trouble with the layout of my website on different screen sizes. The issue can be seen at . At a resolution of 1024*768, everything looks good without any overlap in the "sponsors" or "announcements" section. However, when the window is resized, the ...

htmlcss