grafana/public/sass/components/_gf-form.scss

$gf-form-margin: 0.2rem;
$gf-form-label-margin: 0.2rem;

.gf-form {
  margin-bottom: $gf-form-margin;
  margin-right: $gf-form-margin;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;

  .checkbox-label {
    display: inline;
    cursor: pointer;
    padding: 8px 7px 8px 4px;
  }

  .cr1 {
    margin-left: 8px;
  }
}

.gf-form-group {
  margin-bottom: $spacer * 2.5;
}

.gf-form-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  .gf-form-flex {
    flex-grow: 1;
  }
}

.gf-form-button-row {
  margin-top: $spacer * 1.5;
  a, button {
    margin-right: $spacer;
  }
}

.gf-form-label {
  padding: $input-padding-y $input-padding-x;
  line-height: $input-line-height;
  flex-shrink: 0;

  background-color: $input-label-bg;
  display: block;
  font-size: $font-size-sm;
  margin-right: $gf-form-label-margin;

  border: $input-btn-border-width solid transparent;
  @include border-radius($label-border-radius-sm);
}

.gf-form-checkbox {
  flex-shrink: 0;
}

.gf-form-input {
  display: block;
  width: 100%;
  padding: $input-padding-y $input-padding-x;
  font-size: $font-size-base;
  line-height: $input-line-height;
  color: $input-color;
  background-color: $input-bg;
  background-image: none;
  background-clip: padding-box;
  border: $input-btn-border-width solid $input-bg;
  @include border-radius($input-border-radius-sm);
  @include box-shadow($input-box-shadow);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

  // Unstyle the caret on `<select>`s in IE10+.
  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  // Customize the `:focus` state to imitate native WebKit styles.
  @include form-control-focus();

  // Placeholder
  &::placeholder {
    color: $input-color-placeholder;
    opacity: 1;
  }

  &:disabled,
  &[readonly] {
    background-color: $input-bg-disabled;
    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
    opacity: 1;
  }

  &:disabled {
    cursor: $cursor-disabled;
  }

  &.gf-size-auto { width: auto; }
}

// select.gf-form-input {
//   -webkit-appearance: none;
//   -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
//   appearance: none;
//
//
//   &:-moz-focusring {
//     color: transparent;
//   }
// }
//
// .gf-form-select-wrapper {
//   position: relative;
//   &:after {
//     position: absolute;
//     top: 50%;
//     right: 10px;
//     height: 12px;
//     margin-top: -6px;
//     padding: 0;
//     background-color: transparent;
//     color: $input-color;
//     font: normal normal normal 14px/1 FontAwesome;
//     text-align: center;
//     content: '\f0d7';
//     pointer-events: none;
//   }
// }

.gf-form-btn {
  padding: $input-padding-y $input-padding-x;
  line-height: $input-line-height;
  flex-shrink: 0;
  flex-grow: 0;
}