diff --git a/public/app/core/directives/metric_segment.js b/public/app/core/directives/metric_segment.js
index 7680f6049e0..61415a660b2 100644
--- a/public/app/core/directives/metric_segment.js
+++ b/public/app/core/directives/metric_segment.js
@@ -11,7 +11,10 @@ function (_, $, coreModule) {
' class="gf-form-input input-medium"' +
' spellcheck="false" style="display:none">';
- var buttonTemplate = '';
+
+ var selectTemplate = '';
return {
@@ -20,9 +23,9 @@ function (_, $, coreModule) {
getOptions: "&",
onChange: "&",
},
- link: function($scope, elem) {
+ link: function($scope, elem, attrs) {
var $input = $(inputTemplate);
- var $button = $(buttonTemplate);
+ var $button = $(attrs.styleMode === 'select' ? selectTemplate : linkTemplate);
var segment = $scope.segment;
var options = null;
var cancelBlur = null;
diff --git a/public/app/features/panel/metrics_ds_selector.ts b/public/app/features/panel/metrics_ds_selector.ts
index b5457c21164..25cda0a29f8 100644
--- a/public/app/features/panel/metrics_ds_selector.ts
+++ b/public/app/features/panel/metrics_ds_selector.ts
@@ -13,10 +13,10 @@ var template = `
-