input/select components to have a floating label on focus?

[paigeflourin]

I also wrote this one over at stackoverflow but I'm writing this here again in case I get some help with my issue.

I'm currently creating an SPFX application that uses fluent UI for my forms. I find material UI a bit challenging to use and I wanted something straightforward like fluent UI but I'm trying to modify the CSS of the dropdown component to have the label float when focusing on the dropdown element. something like this codepen here:

so far its not working based from the tutorials I have followed probably because of the structure of the Dropdown component when rendered to the browser. Is it possible to do it in fluent UI?

this is how I targeted the specific element:

<Dropdown
    placeholder='Select '
    selectedKey={this.state.selectedRequestType}
    options={this.requestTypesOption}
    onChange={this.onDropdownChange}
    label="Select Category*"
    className={styles.floating}
 />

and my SCSS looks like this:

.floating {
    margin-bottom: 2rem;
    background-color: var(--field__background);
    transition: background-color 0.2s ease;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.floating > div:first-of-type { 

  padding: 1.8rem 1rem 0.6rem;
  font-size: 1rem;
  border-bottom: 0.1rem solid var(--input__border);
  transition: border-color 0.2s ease;
  caret-color: var(--color__accent);
}
 
.floating label {
  display: block;
  position: relative;
  max-height: 0;
  font-weight: 500;
  pointer-events: none;
}

.floating label::before {
  display: inline-block;
  filter: blur(0);
  transform-origin: left top;
  transition: transform 0.2s ease;
  left: 1rem;
  position: relative;
}

.floating label::after {
  bottom:1rem;
  content: "";
  height: 0.1rem;
  position:absolute;
  transition: transform 180ms cubic-bezier(0.4,0,0.2,1),
  opacity 180ms cubic-bezier(0.4,0,0.2,1),
  background-color 0.3s ease;
  opacity: 0;
  left: 0;
  top:100%;
  margin-top: -0.1rem;
  transform: scale3d(0,1,1);
  width: 100%;
}

.floating > div:first-of-type:focus + .floating label::after {
  transform: scale3d(1,1,1);
  opacity:1;
}

.floating > div:first-of-type:placeholder-shown + 
.floating label::before {
   transform: translate3d(0,-2.2rem,0) scale3d(1,1,1);
}

.floating label::before,
.floating > div:first-of-type:focus + .floating label::before {
  transform: translate3d(0,-3.12rem,0) scale3d(0.82,0.82,1);
}

the output isn't what I wanted

[khmakoto]

@paigeflourin do you have a codepen of your progress so far I could use as a starting point to look at this?

[paigeflourin]

@khmakoto ,its okay now I have created a custom component with the dropdown component to make this work . Thanks!

[khmakoto]

Sounds good @paigeflourin, let me know if you need any other assistance 😄