JSFiddle - React, Tailwind, and code Playground

Fields for Ubigreen

by Zonedark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl" class="background" style="">
  <br/>

  <div class="test">
    <div class="row">
      <div class="col-md-5 blocs">

        <div class="row">
          <div class="col-md-1">
            <i class="fa fa-bookmark fa-2x fieldicon"></i>
          </div>
          <div class="col-md-11">
            <select class="selectfieldclass">
              <option value="" style="color:blue" disabled selected hidden>Sélectionner un type</option>
              <option value="volvo" ng-repeat="type in Types">{{type}}</option>
            </select>
          </div>
        </div>

        <div class="row">
          <div class="col-md-1">
            <i class="fa fa-building fa-2x fieldicon"></i>
          </div>
          <div class="col-md-11">
            <select class="selectfieldclass">
              <option value="" style="color:blue" disabled selected hidden>Sélectionner une Organisation</option>
              <option value="volvo" ng-repeat="orga in Organisations">{{orga}}</option>
            </select>
          </div>
        </div>

        <div class="row">
          <div class="col-md-1">
            <i class="fa fa-calendar fa-2x fieldicon"></i>
          </div>
          <div class="col-md-11">
            <select class="selectfieldclass">
              <option value="" style="color:blue" disabled selected hidden>Sélectionner une Période</option>
              <option value="volvo" ng-repeat="periode in Periodes">{{periode}}</option>
            </select>
          </div>
        </div>

        <div class="row">
          <div class="col-md-1">
            <i class="fa fa-file fa-2x fieldicon"></i>
          </div>
          <div...

CSS

.blocs > div {
  margin-top: 40px;
}

.blocs > div:last-child {
  margin-bottom: 20px;
}

.selectfieldclass {
  font-weight: bold;
  width: 100%;
  border: none;
  border-bottom: solid 2px #d9d9d9;
  outline: none;
  margin: 5px 0 5px 0;
}

.selectfieldclass:focus {
  border-bottom: solid 2px rgb(66, 133, 246);
}

.fieldclass {
  font-weight: bold;
  width: 100%;
  border: none;
  border-bottom: solid 2px #d9d9d9;
  outline: none;
  margin: 5px 0 5px 0;
}

.fieldclass:focus {
  border-bottom: solid 2px rgb(66, 133, 246);
}

.fieldicon {
  margin-top: 0;
}

.background {
  background-color: rgb(238, 238, 238);
  height: 2000px;
}

.test {
  //border: solid 2px black;
  -moz-box-shadow: 0px 2px 3px 1px #c0c0c0;
  -webkit-box-shadow: 0px 2px 3px 1px #c0c0c0;
  -o-box-shadow: 0px 2px 3px 1px #c0c0c0;
  box-shadow: 0px 2px 3px 1px #c0c0c0;
  filter: progid: DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=180, Strength=3);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  margin-left: 10px;
  margin-top: 10px;
  vertical-align: middle;
  padding-left: 20px;
  background-color: white;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.name = "Angular";

  $scope.Organisations = ["Orga 1", "Orga 2", "Orga 3", "Orga 4", ];
  $scope.Types = ["Energétique", "Budgétaire", "Environnemental"];
  $scope.Periodes = ["Jour précédent", "Jour glissant", "Semaine en cours"];
}]);