title: Material themed outlined select with transparent background
body: <p>I am learning html and css, and I would like to create a pure html and css based material outlined select control. I found one almost perfect solution, but I have a little problem, the background color is hard coded in the css, but I want to set the background color to transparent. Actually, I can do this, but the top border crossed out the label. Do you have any suggestion, what can I do, to reach this? I tried ::before ::after selectors in css, but I really do not understand everything, so I failed.</p>
  <p>Here is the control, what I found:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.body {
    position: relative;
    font-family:
      'Roboto','Helvetica','Arial',sans-serif;
  }
  
  .wrap {
    position: absolute;
    right: 0;
    top: 40%;
    width: 350px;
    left: 0;
    margin: 0 auto;
  }
  
  /* select starting stylings ------------------------------*/
  .select {
    font-family:
      'Roboto','Helvetica','Arial',sans-serif;
      position: relative;
      width: 350px;
  }
  
  .select-text {
      position: relative;
      font-family: inherit;
      background-color: transparent;
      width: 350px;
      padding: 10px 10px 10px 10px;
      font-size: 18px;
      border-radius: 4px;
      border: 2px solid rgba(0,0,0, 0.12);
  }
  
  /* Remove focus */
  .select-text:focus {
      outline: none;
    border: 2px solid orange;
  }
  
      /* Use custom arrow */
  .select .select-text {
      appearance: none;
      -webkit-appearance:none;
    color: gray;
  }
  
  .select:after {
      position: absolute;
      top: 18px;
      right: 10px;
      /* Styling the down arrow */
      width: 0;
      height: 0;
      padding: 0;
      content: '';
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid rgba(0, 0, 0, 0.12);
    
      pointer-events: none;
  }
  
  /* LABEL ======================================= */
  .select-label {
      color: rgba(0,0,0, 0.26);
    background: white;
      font-size: 18px;
      font-weight: normal;
      position: absolute;
      pointer-events: none;
    padding: 0 5px;
      left: 10px;
      top: 12px;
      transition: 0.2s ease all;
  }
  
  
  /* active state */
  .select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
      color: orange;
      top: -8px;
      transition: 0.2s ease all;
      font-size: 14px;
  }
  
  .select-text:valid:not(focus) ~ .select-label {
      color: rgba(0,0,0, 0.26);
    background: red;
  }
  .select-text:valid:focus ~ .select-label {
    color: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="wrap"&gt;
        
  &lt;!--Select with pure css--&gt;
        &lt;div class="select"&gt;
                      &lt;select class="select-text" required&gt;
                          &lt;option value="" disabled selected&gt;&lt;/option&gt;
                          &lt;option value="1"&gt;Option 1&lt;/option&gt;
                          &lt;option value="2"&gt;Option 2&lt;/option&gt;
                          &lt;option value="3"&gt;Option 3&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;label class="select-label"&gt;Select&lt;/label&gt;
                  &lt;/div&gt;
  &lt;!--Select with pure css--&gt;
        
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So, what could I read in this topic, or how can I achieve this? Could this control be good, or do I have to search another (or create a new one) solution?</p>
  <p>Thank you guys</p>
  <p>Also available as codepen: <a href="https://codepen.io/mcl28Magui/pen/PoqWEJe" rel="nofollow noreferrer">CodePen</a></p>