005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
88 lines
2.7 KiB
JavaScript
88 lines
2.7 KiB
JavaScript
import * as React from 'react';
|
|
import { styled } from '@mui/material/styles';
|
|
import InputLabel from '@mui/material/InputLabel';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import Select from '@mui/material/Select';
|
|
import NativeSelect from '@mui/material/NativeSelect';
|
|
import InputBase from '@mui/material/InputBase';
|
|
|
|
const BootstrapInput = styled(InputBase)(({ theme }) => ({
|
|
'label + &': {
|
|
marginTop: theme.spacing(3),
|
|
},
|
|
'& .MuiInputBase-input': {
|
|
borderRadius: 4,
|
|
position: 'relative',
|
|
backgroundColor: (theme.vars ?? theme).palette.background.paper,
|
|
border: '1px solid #ced4da',
|
|
fontSize: 16,
|
|
padding: '10px 26px 10px 12px',
|
|
transition: theme.transitions.create(['border-color', 'box-shadow']),
|
|
// Use the system font instead of the default Roboto font.
|
|
fontFamily: [
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
].join(','),
|
|
'&:focus': {
|
|
borderRadius: 4,
|
|
borderColor: '#80bdff',
|
|
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
|
|
},
|
|
},
|
|
}));
|
|
|
|
export default function CustomizedSelects() {
|
|
const [age, setAge] = React.useState('');
|
|
const handleChange = (event) => {
|
|
setAge(event.target.value);
|
|
};
|
|
return (
|
|
<div>
|
|
<FormControl sx={{ m: 1 }} variant="standard">
|
|
<InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
|
|
<BootstrapInput id="demo-customized-textbox" />
|
|
</FormControl>
|
|
<FormControl sx={{ m: 1 }} variant="standard">
|
|
<InputLabel id="demo-customized-select-label">Age</InputLabel>
|
|
<Select
|
|
labelId="demo-customized-select-label"
|
|
id="demo-customized-select"
|
|
value={age}
|
|
onChange={handleChange}
|
|
input={<BootstrapInput />}
|
|
>
|
|
<MenuItem value="">
|
|
<em>None</em>
|
|
</MenuItem>
|
|
<MenuItem value={10}>Ten</MenuItem>
|
|
<MenuItem value={20}>Twenty</MenuItem>
|
|
<MenuItem value={30}>Thirty</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<FormControl sx={{ m: 1 }} variant="standard">
|
|
<InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
|
|
<NativeSelect
|
|
id="demo-customized-select-native"
|
|
value={age}
|
|
onChange={handleChange}
|
|
input={<BootstrapInput />}
|
|
>
|
|
<option aria-label="None" value="" />
|
|
<option value={10}>Ten</option>
|
|
<option value={20}>Twenty</option>
|
|
<option value={30}>Thirty</option>
|
|
</NativeSelect>
|
|
</FormControl>
|
|
</div>
|
|
);
|
|
}
|