Revamp the md-select Container

Question

Revamp the md-select Container

Hello there!

I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects.

Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. It seems that Material introduces a new Div around the md-select-menu with styles like:

style="display: block; left: 593px; top: 70px; min-width: 139.469px; font- size: 12px;"

This is what I'm trying to alter. Any assistance you can provide would be greatly appreciated

Thank you in advance!

css angularjs angular-material

Answer 1

Answer №1

Customize your styling with the md-container-class attribute - check out this example on CodePen

For more information, refer to the official documentation:

https://i.stack.imgur.com/1cbnV.png

Here's a sample markup:

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-margin>
  <md-input-container style="margin:50px">
    <label>Bird</label>
    <md-select ng-model="birdType" md-container-class="mySelect">
      <md-option ng-repeat="bird in birds" value="{{bird}}">{{bird}}</md-option>
    </md-select>
  </md-input-container>
</div>

And here's how you can apply custom CSS:

.mySelect md-select-menu {
  background: yellow;
  margin-left: 100px;
  margin-top: 50px;
}

.mySelect md-content {
  background: yellow;
}

.mySelect md-option:hover {
  background: pink !important;
}

Answer 2

Customize your styling with the md-container-class attribute - check out this example on CodePen

For more information, refer to the official documentation:

https://i.stack.imgur.com/1cbnV.png

Here's a sample markup:

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-margin>
  <md-input-container style="margin:50px">
    <label>Bird</label>
    <md-select ng-model="birdType" md-container-class="mySelect">
      <md-option ng-repeat="bird in birds" value="{{bird}}">{{bird}}</md-option>
    </md-select>
  </md-input-container>
</div>

And here's how you can apply custom CSS:

.mySelect md-select-menu {
  background: yellow;
  margin-left: 100px;
  margin-top: 50px;
}

.mySelect md-content {
  background: yellow;
}

.mySelect md-option:hover {
  background: pink !important;
}

Revamp the md-select Container

Answer №1

Similar questions

Showing button based on a particular value

Excessive Blank Areas

Unusual thin border of white pixels on IE 9

Text input field with uneditable text displayed at the end

Pictures do not adhere to the maximum width set on their parent elements

ng-model fails to synchronize with HTML

Javascript involved in the process of CSS Background-Images loading after HTML Images

Guide to creating a simple multi-column index linking each item to a specific page reference

Paypal Payment Plans on a Monthly Basis Utilizing the Bootstrap Pricing Slider

Alter the background image of a DIV based on the selected menu item

why is my angular listing malfunctioning when I try to compare two fields?

The top navigation menu is positioned above the sidebar menu due to a CSS error

Struggling with Implementing Modals in Bootstrap 3.3.7

Multi-line auto-suggest list with typeahead functionality

Is it possible to create a transparent colored foreground in HTML?

When accessing req.param on the server side in a Node.js application, it returns undefined

Tips for centering a div horizontally when it exceeds the width of a mobile screen

Troubleshooting an Issue with CSS Sliding Doors

My efforts to resolve the issues in my code have been ongoing, but unfortunately, I have been unable to find a solution

Implementing Image Data in AngularJS: A Guide to Binding Images to IMG Tags