Focus ring opacity not working with arbitrary value - tailwind-css

I am using Tailwind 3. I have applied a ring on focus to my text input with an arbitrary color like this:
<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)]" />
This works fine, however after I try applying an opacity to this ring it fails:
<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)] focus:ring-opacity-30" />
This opacity works fine if I don't use an arbitrary color like this:
<input type="text" className="focus:ring focus:ring-indigo-200 focus:ring-opacity-30" />
Any ideas how to make ring-opacity work with arbitrary?

In your first example:
<input type="text" className="focus:ring focus:ring-[rgba(0, 244, 0)]" />
I expect your arbitrary value is being ignored. The color you see (a light blue I suspect) is coming from the default of focus:ring.
Tailwind arbitrary values don't work with rgb or rgba values, this issue on Github exposed it and this pull was supposed to fix it but you can still see the behavior on Tailwind Play quite clearly, there is no generated class when using arbitrary rgb values (if there were a tiny color swatch would appear next to the class).
For now the safest path is to use hex colors instead of rgb or rgba.
EDIT:
As pointed out by Adam Wathan, creator of Tailwind in this issue. Classes cannot have spaces per the docs. So the Tailwind Play example from above does work with whitespace extracted or replaced with underscores https://play.tailwindcss.com/xpPrMf5bO8.

Related

Prevent autofocus of contents in Material UI's date input

i am trying to figure out how to prevent the contents of Material UI's date input from being automatically focused when inputing characters. For some reason, the focus is on whichever field I am typing in. For example if I am typing the year portion of the date, all four digits will be highlighted which means when I backspace, even if I mean to just clear one digit, all digits would be cleared. Please see image below this paragraph of what I mean.
Like I said, I think that behavior of clearing all digits with a single backspace is due to all digits of whichever current portion of the date being selected all at one.
I have tried to use the css ways like setting userSelect to 'none' for the input, as well as setting tabIndex to -1. That doesn't seem to do anything. Please see my code below:
<TextField
tabindex="-1"
className={`${classes.formInput} ${classes.dateInput}`}
classes={{ root: classes.dateInput}}
value={date}
name="date"
onChange={e => setFormField(e.target.getAttribute('name'), e.target.value)}
type="date"
required
label="Date"
variant="standard" />
Any help is appreciated. Thanks!
Looks like it is not possible to change this since the TextField is build on top of the native input element. If you take a look at the Mozilla docs about the native input you will see that this is currently the only way to input on type="date"
You can use the DatePicker from the MUI library this input does allow you to "backspace".
I hope this helps you!

Changing color of mat form ripple conditionally

I am working on a angular app. I am using mat-form-field as follows.
<mat-form-field appearance="fill">
<mat-label id="title">{{ title }}
</mat-label>
<input formControlName="title" matInput id="title" (click)='updateValue("title")' readonly>
</mat-form-field>
I get a rectangle shaped form field with above code. When I hover over the bottom line of mat form field like when I take my mouse on bottom of a particular form field I want to change color. For it I am suing following CSS
.mat-form-field-ripple {
background-color: #00798e;
}
It by defaults changes color of base of mat form field. The problem I am facing here is I want a different color in some other condition. For example, In my component I have a variable, If it's value is X then I want above color and if it's value is Y, then I want to apply a different ripple color. As mat-form-field-ripple seems to be in built property of mat form field, I am not able to change color at runtime. Whatever color I give in above code is applied in every condition. But I want different color in different conditions. How can I do that?
You can bind the color of the HTML element to a variable. Something like:
<mat-form-field [style.background-color]="color">
And define the variable color in your .ts file
color: string = "red"
That way, whenever you change the value of variable color, the background color of the element should change as well.

MAT-FORM-FIELD-OUTLINE label text overlapping with form-field-outline border

In my application, i have 3 step mat-stepper process. In First stepper, i have mat-form-field outline and it works fine but in Second and Third Stepper i have the same mat-form-field outline but the label is overlapping with border line like below.
<mat-form-field appearance="outline">
<mat-label>Member ID *</mat-label>
<input matInput placeholder="Test"
formControlName="memberID"
[(ngModel)]="submitPaymentRequest.getAccount().acctNum">
<mat-placeholder>TEst</mat-placeholder>
<mat-error app-validation-message></mat-error>
</mat-form-field>
i could see this is happening in IE only not in Chrome.
could any one help on this. Thanks in Advance
Unfortunately, Material Angular does not support IE properly (officialy, IE11+ is supported...).
If IE support is important to your project, use something else like https://materializecss.com/

Input placeholder with different color asterisk?

I'm looking to have a placeholder text like this:
<input type="text" placeholder="Name: *" />
But I'm trying to figure out how to get the * to be a different color. There are many solutions on here that don't work in modern browsers anymore.
You can create a dummy placeholder with input value and on focus/blur just hide/show respectively the placeholder.

Sprite background - inline nested? (html frozen)

Here's another CSS changes only question. [
Demonstrated here
So, I have a background sprite for some styling elements, and want to style textfields with endcaps (TEXTFIELD) and a repeating background. I've lined things up using padding spaces here in the example, which lets me set background-color, but not a background I think. I've been staring at this for too long, and need some advice. Is it possible to line things up the way I want them, without changing the HTML?
<label> Enter Zipcode: </label>
<span class='bg'>
<span class='leftcap'>
<span class='rightcap'>
<input type="text" class="textfield" name="zipCode" />
</span>
</span>
</span>
edit: I'm spitting angry over here, somehow lost my jsfiddle, and gar. My question still stands... the other jsfiddle linked shared a couple similarities, and served as a base, but I ended up changing almost everything by the time I had it set up. Good thing I copied a little over here.
edit2: here is a partial remade jsfiddle. http://jsfiddle.net/dreamling/P3Jev/3/
I changed outer2 to display:inline-block, that fixes it.
The strange gaps are there because inline-block elements are whitespace dependend (and a whitespace is exactly 4px at standard font-size)
Fix: add letter-spacing:-4px + line-height: 1px.
See http://jsfiddle.net/L8TyD/6/
EDIT: i removed the fixed width, and added hack to make it work in ie7

Resources