Tips on changing the text color of the input text component exclusively in Angular

While developing forms in Angular, I am utilizing bootstrap libraries.

One of the components in my form is a readonly input text field called 'Status' which can have values like Open, In Progress, or Closed.

To enhance its visibility, I want to style the text value of the Status field with different background colors based on its status.

The issue I am facing is that when I set the background color for the input text field, it covers the entire field. However, I only want the background color to apply to the text itself.

I am currently struggling to find a solution for this problem.

Attached is a sample screenshot for reference.

Any suggestions on how to achieve this would be greatly appreciated.

cssangularbootstrap-4ng-class

Answer №1

1. Styling without Input Element

When it comes to styling elements in HTML, you can use the following code:

Status: <span class="badge" [ngClass]="{'open': status =='open'}">{{Status}}</span>

If you want to customize the appearance using CSS:

.badge {
    padding: 4px;
    margin-left: 10px;
    border-radius: 4px;
    background: blue;
    color:white;
}

.badge.open {
    background: green;
}

2. Adding Style with Input Element

For an input element, you can apply the style like this:

Status <input class="badge" [ngClass]="{'open': status =='open'}" [size]="status.length" [(ngModel)]="status">

To adjust the look of the input using CSS:

input.badge {
    border: 0;
    background: blue;
    color: white;
    padding: 4px;
    margin: 0;
    display: inline-block;

}

input.badge:active, input.badge:focus {
    background: blue;
    outline: 0;
}

input.open {
    background: green;
}

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

The API request for "Endpoint ... includes authorization metadata, however there is no middleware available to support authorization

I am currently in the process of developing a straightforward web application in Angular, utilizing Auth0 for handling the authorization aspect. I am facing some challenges as I attempt to link the frontend and backend components. Every time I send an HTT ...

c#angularapiasp.net-coreauth0

Troubleshooting z-index conflict when using :before pseudo element to emphasize list entries

I am experiencing an issue with highlighting items in a list generated by JSTree using the :before pseudo element. The z-indexes seem to be causing some trouble, as adjusting them results in the highlighting appearing either behind all links or in front of ...

csscss-selectorsz-indexjstree

Applying CSS to iterate through values using foreach instead of relying on JavaScript

I have been wondering whether it is achievable to shift each value to the right using only CSS with logic similar to this: <div ng-show="c.reviewId==item.id" style="margin-left:" . {{$index}}*10 . "px""> For instance, the desired output could look ...

javascripthtmlcssangularjs

Sprockets could not locate the file for jquery.atwho

I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...

javascriptjquerycssruby-on-railssprockets

A mistake was made: The template contains errors stating that 'app-my-profile' is an unknown element

I encountered an error message: "Uncaught Error: Template parse errors: 'app-my-profile' is not a known element," while working on setting up my profile service. import { BrowserModule } from '@angular/platform-browser'; import { NgM ...

angular

Change the CSS hover menu to function as a click menu instead of a hover

I am working on a CSS/HTML menu that includes the following CSS code: #nav { background-color:#F36F25; margin:0 0 5px 0; width: 100%; height:35px; left:0; z-index:1; border-top:2px solid #FFFFFF; border-bottom:2px solid #FF ...

htmlcss

Resizing the carousel container dimensions in Angular-UI-Bootstrap

For my project, I have implemented Angular-UI-Bootstrap in the carousel feature. The challenge I am facing is that I need to display images of varying dimensions, some larger and some smaller than the container itself. How can I adjust the size of the caro ...

csshtmlangularjsangular-ui-bootstrap

Achieving Full Height and Width of Tab Panel with Bootstrap 4.3

I recently upgraded to bootstrap 4.3 and discovered the handy sizing classes m-* and w-* for setting element height and width. After successfully achieving 100% height and width for the container, I'm now looking to apply these dimensions to the tab-p ...

cssbootstrap-4

Optimizing mobile page layouts with CSS

I'm putting in a lot of effort to ensure that my simple form page is optimized for mobile devices. Although the form is visible, I find myself having to zoom in quite a bit in order to read it. Here's an example: ...

htmlcssmobilemobile-website

The CSS property -webkit-user-select does not seem to be functioning as intended

I'm currently working on a website optimized for iPads and I'm looking to avoid the copy and paste bubble that pops up when users touch and hold on an image. I want something to trigger on touchstart and ontouchend events instead. Below is my HT ...

htmlcssipadmobile

HTTP provider is missing! Error: No HTTP provider found! encountered injectionError at this juncture

Encountered an error: No provider for Http! Error: No provider for Http! at injectionError Sample Component File: import { Component,Injectable } from '@angular/core'; import { HttpModule, Http } from '@angular/http'; import { IonicPa ...

angulartypescriptionic-frameworkionic2ionic3

When I set the width of my script to 100% in CSS, it causes the width to become distorted

I encountered an issue with my Div Slider that swaps out Divs on click. When I modified the CSS to include the following: .hslide-item {width: 100%}; The script started ignoring the entire div width. I am looking for a solution where the .hslide-item ca ...

javascriptjquerycss

How to Create a Speech Bubble in SVG Using SnapSVG

In the process of developing a chat program, I have animated figures moving across the screen engaging in conversations. One crucial aspect I am yet to implement is creating scalable speech bubbles for when users interact. Being relatively new to SVG and ...

javascriptcsssvgsnap.svg

Place elements in an absolute position without being affected by the parent element's borders

Typically, when attempting to position an element absolutely in the top left corner of a parent container, it will be done relative to the border width. You can refer to this example in the fiddle link provided: http://jsfiddle.net/t52Pp/1/: <div> ...

csspositionabsolute

The challenges of utilizing breakpoints effectively within Tailwind CSS

So here's the issue. I've gone through various other queries related to this problem but haven't found a solution yet. Tailwind seems to be functioning well except for breakpoints. This is what I have in the head <meta name="viewpo ...

htmlcsstailwind-cssbreakpoints

Retrieving CSS styling details of a node following the parsing of an HTML page using Java

Currently, I am working on a project that involves analyzing web pages. To parse HTML, I am utilizing a Java library which results in an org.w3c.dom document. I am looking to extract all CSS information related to a particular tag node within my dom docum ...

javacssparsingdomcss-parsing

The input placeholder text in Safari 5.1.7 is unable to be centered

Check out my code snippet below: HTML: <input type="text" name="Surname" placeholder="Surname" id="surname"> CSS: ::i-block-chroms, input[placeholder]::-webkit-input-placeholder { text-align:center; } ::-webkit-input-placeholder { t ...

jqueryhtmlcsssafari

Generating Angular 2 components on the fly using ngFor

A challenge I am facing is with my controller, which contains a list of components that I want to display within a page. These components are functioning correctly when used individually. Within my HTML template: <ng-container *ngFor="let component of ...

angular

Adjust the position of an anchor tag when clicked with a fixed header

I found a similar question on stackoverflow and was able to derive my solution from there. However, I am facing a slight issue with it. In my case, I have a small fixed submenu at the top of the page. When I click on an anchor link, I want the scroll posi ...

javascriptjquerycsshtml

Utilizing static HTML, CSS, and JavaScript for secure backend administrative control

Seeking a solution for my static html, CSS, and JS website which includes some Jquery elements. I want to implement a user-friendly backend system that allows non-developer admins to log in, easily edit sections or change images with their own preferences. ...

phphtmlcssdynamicadmin