Attribute binding in angular

Question

i am trying to highlighted selected radio button using Attribute Binding but i am not getting result can some one help me please

css

input:default {
  box-shadow: 0 0 1px 1px red;
}

html

<input type="radio" name="gender" value="male" [attr.default]="value=='male'" (click)="value='male'"> Male<br>
<input type="radio" name="gender" value="female" [attr.default]="value=='female'" (click)="value='female'"> Female<br>
<input type="radio" name="gender" value="other" [attr.default]="value=='others'" (click)="value='other'"> Other

Below my stackblitz link

https://stackblitz.com/edit/angular-648y1w?file=src/app/app.component.html

but i am not getting result - So what is the problem? you do get 3 radio buttons, which is selectable. — Jonas Praem
– Jonas Praem, Commented Jan 16, 2019 at 8:52
Krish, I think that default it's only for buttons (I'am not 100% sure). In your stackblitz you has input[type=checkbox], must be input[type="radio"] -see that type goes between quotes. You can use simply "checked" in your .css and no code input[type="radio"]:checked — Eliseo
– Eliseo, Commented Jan 16, 2019 at 8:58

Just code · Accepted Answer · 2019-01-16 09:05:30Z

1

Your css selector is wrong

it should be like this

input[type="radio"][default="true"] {
  box-shadow: 0 0 1px 1px red;
}

demo

edited Jan 16, 2019 at 9:05

answered Jan 16, 2019 at 8:52

Just code

13.8k10 gold badges54 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jonas Praem Over a year ago

demo links to this SO question

Krish Over a year ago

i have small doubt your saying my css is wrong but i followed this official link its working fine w3schools.com/cssref/sel_default.asp

Krish Over a year ago

can you please explain me ?

Just code Over a year ago

@Krish The :default selector selects the default form element in a group of related elements. means when it renders and finds the radio checked on that element css will be applied, your case is of attribute not default selected.

Collectives™ on Stack Overflow

Attribute binding in angular

css

html

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

css

html

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related