Force label float when no input data in Angular Material - angular-material

Question

In Angular Material, the default design of input directives is for the content within <label> to be displayed in the input element until the user enters some input, at which point it will float above the input element, as seen in all examples here.
Is there any way to force the labels to float above the input box at all times instead, even when no data has been entered?

Answer 1

I think the css class md-input-has-placeholder is what you need:
<md-input-container class="md-input-has-placeholder">
<label>Name</label>
<input type="text"/>
</md-input-container>
Plunker example here
Hope it helps.

Answer 2

The is an official feature for that: floatLabel="always"
The floatLabel property of can be used to change this default floating behavior. It can set to never to hide the label instead of float it when text is present in the form field control. It can be set to always to float the label even when no text is present in the form field control. It can also be set to auto to restore the default behavior.
<mat-form-field floatLabel="always">
<mat-label>Both a label and a placeholder</mat-label>
<input matInput [(ngModel)]="model.value">
</mat-form-field>
source, see the official form-field documentation

Answer 3

With Md-select this worked for me:
<md-input-container style="width: 200px;" md-input-has-placeholder>
<placeholder>Snack Types </placeholder>
<md-select ng-model="selectedOption">
<md-option ng-repeat="item in snacks" >
{{item.name}}
</md-option>
</md-select>
</md-input-container>

Answer 4

For the md-select element, occupy the following:
<md-input-container class="md-input-has-placeholder">
<label md-no-float="true" class="md-required">Snack Types</label>
<md-select ng-model="$ctrl.selection" ng-required="true" md-no-asterisk>
<md-option ng-value="option.id" ng-repeat="option in $ctrl.selection">{{ opcion.value}}</md-option>
</md-select>
</md-input-container>
I used the following CSS to change the label when data is being entered and highlight the other fields:
md-input-container:focus-within > label[class~="md-required"]{
transform: scale(1);
font-weight: bold;
}
And the following CSS so that the asterisk is always in color (you can put the color you want):
md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after, md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after{
color: rgb(255,87,10);
}