how to disable the select box border on MUI component

Question

i would like to disable the border on the select box and change color of the label text while onfocus and onblur i have tried it but im unable to disable it

im not that decent in Mui component customization

we is the image that i want

and here what i achieved

here is the code

<div>
  <FormControl sx={{ minWidth: 120, height: "1rem" }}>
    <Select
      value={age}
      onChange={handleChange}
      displayEmpty
      inputProps={{ "aria-label": "Without label" }}
      sx={{
        height: "1rem",
        borderRadius: 1,
        // border: ".2rem solid white",
        bgcolor: "#fffff",
        outline: "none",
        padding: "0rem",
        // fontSize: "4rem",
      }}
    >
      <MenuItem value="">Affiliation</MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  </FormControl>
</div>

here is the mui fresh component

https://codesandbox.io/s/vjeqqb?file=/demo.js

could anyone help me out please i want that output exact in the about image

thanks advance

Answer 1

Just set sx attribute like the following:

<select
    ...
    sx={{ boxShadow: 'none', '.MuiOutlinedInput-notchedOutline': { border: 0 } }}>
...
</select>