How can I imitate the look of the outline and label from Material-UI's outlined textfield?2019 Community Moderator ElectionMy dropdown menu doesn't take in horizontal and there is a space between the dropdown buttons. Any one?How get data from material-ui TextField, DropDownMenu components?Material-ui textfield with labelReactJS - How can I set a value for textfield from material-ui?Mobile Responsive DivsHow to resize material-ui's tabsReactJS: How to put <input/> inside a Material UI's <TextField/>?Material UI - TextField outlined doesn't render outlineHow can I change the label size of a material ui TextField?Creating a label alongside an input using material-ui's TextField and getInputProps

School performs periodic password audits. Is my password compromised?

Why restrict private health insurance?

Making a kiddush for a girl that has hard time finding shidduch

What do *foreign films* mean for an American?

Is a piano played in the same way as a harmonium?

Possible to detect presence of nuclear bomb?

Why do we say ‘pairwise disjoint’, rather than ‘disjoint’?

Is it possible to find 2014 distinct positive integers whose sum is divisible by each of them?

When a wind turbine does not produce enough electricity how does the power company compensate for the loss?

Street obstacles in New Zealand

How do spaceships determine each other's mass in space?

What is this diamond of every day?

Power Strip for Europe

Why does Solve lock up when trying to solve the quadratic equation with large integers?

Getting the || sign while using Kurier

Is it possible that a question has only two answers?

What will happen if my luggage gets delayed?

Giving a career talk in my old university, how prominently should I tell students my salary?

Recommendation letter by significant other if you worked with them professionally?

What do you call someone who likes to pick fights?

How do we create new idioms and use them in a novel?

What is Tony Stark injecting into himself in Iron Man 3?

Trig Subsitution When There's No Square Root

Proving a statement about real numbers



How can I imitate the look of the outline and label from Material-UI's outlined textfield?



2019 Community Moderator ElectionMy dropdown menu doesn't take in horizontal and there is a space between the dropdown buttons. Any one?How get data from material-ui TextField, DropDownMenu components?Material-ui textfield with labelReactJS - How can I set a value for textfield from material-ui?Mobile Responsive DivsHow to resize material-ui's tabsReactJS: How to put <input/> inside a Material UI's <TextField/>?Material UI - TextField outlined doesn't render outlineHow can I change the label size of a material ui TextField?Creating a label alongside an input using material-ui's TextField and getInputProps










1















I'm trying to imitate the outlined textfield from Material-UI but I don't know how to hide the border behind the title text.



In the below image, notice how the "Due Date/Time" is taken from the Material-UI library and the title hides the border behind it but when I tried to imitate it with a custom component I just couldn't hide the border.



Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS?



My current component looks liks this:



<div style=inputContainerStyle>
<div style=
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',

>
Color
</div>
<div
className="flex-row"
style=
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',

>

availableColors.map(color => <div style=colorCircleStyle(color) />)

</div>
</div>











share|improve this question
























  • Set background-color

    – evgeni fotia
    Mar 6 at 22:19











  • Have you tried background-color: inherit on the <div>Color</div>?

    – Buzinas
    Mar 6 at 22:21















1















I'm trying to imitate the outlined textfield from Material-UI but I don't know how to hide the border behind the title text.



In the below image, notice how the "Due Date/Time" is taken from the Material-UI library and the title hides the border behind it but when I tried to imitate it with a custom component I just couldn't hide the border.



Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS?



My current component looks liks this:



<div style=inputContainerStyle>
<div style=
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',

>
Color
</div>
<div
className="flex-row"
style=
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',

>

availableColors.map(color => <div style=colorCircleStyle(color) />)

</div>
</div>











share|improve this question
























  • Set background-color

    – evgeni fotia
    Mar 6 at 22:19











  • Have you tried background-color: inherit on the <div>Color</div>?

    – Buzinas
    Mar 6 at 22:21













1












1








1








I'm trying to imitate the outlined textfield from Material-UI but I don't know how to hide the border behind the title text.



In the below image, notice how the "Due Date/Time" is taken from the Material-UI library and the title hides the border behind it but when I tried to imitate it with a custom component I just couldn't hide the border.



Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS?



My current component looks liks this:



<div style=inputContainerStyle>
<div style=
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',

>
Color
</div>
<div
className="flex-row"
style=
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',

>

availableColors.map(color => <div style=colorCircleStyle(color) />)

</div>
</div>











share|improve this question
















I'm trying to imitate the outlined textfield from Material-UI but I don't know how to hide the border behind the title text.



In the below image, notice how the "Due Date/Time" is taken from the Material-UI library and the title hides the border behind it but when I tried to imitate it with a custom component I just couldn't hide the border.



Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS?



My current component looks liks this:



<div style=inputContainerStyle>
<div style=
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',

>
Color
</div>
<div
className="flex-row"
style=
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',

>

availableColors.map(color => <div style=colorCircleStyle(color) />)

</div>
</div>








css reactjs material-ui






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 7 at 22:04









Ryan Cogswell

5,1111624




5,1111624










asked Mar 6 at 22:09









Slava ZorefSlava Zoref

63114




63114












  • Set background-color

    – evgeni fotia
    Mar 6 at 22:19











  • Have you tried background-color: inherit on the <div>Color</div>?

    – Buzinas
    Mar 6 at 22:21

















  • Set background-color

    – evgeni fotia
    Mar 6 at 22:19











  • Have you tried background-color: inherit on the <div>Color</div>?

    – Buzinas
    Mar 6 at 22:21
















Set background-color

– evgeni fotia
Mar 6 at 22:19





Set background-color

– evgeni fotia
Mar 6 at 22:19













Have you tried background-color: inherit on the <div>Color</div>?

– Buzinas
Mar 6 at 22:21





Have you tried background-color: inherit on the <div>Color</div>?

– Buzinas
Mar 6 at 22:21












3 Answers
3






active

oldest

votes


















0














Just apply the same background color on the color div as the parent's background color, you can do it by background-color: inherit like this:



<div style=inputContainerStyle>
<div style=
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',
background-color:'inherit' **(just add this line)**

>
Color
</div>
<div
className="flex-row"
style=
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',

>

availableColors.map(color => <div style=colorCircleStyle(color) />)

</div>
</div>





share|improve this answer






























    0














    There is a great deal of flexibility in what you can do with TextField. TextField supports plugging in different types of inputs (e.g. Select, input, custom pickers) via the inputComponent property. You could leverage this to put anything inside its labelled outline by creating a custom component like this OutlinedDiv:



    import React from "react";

    import TextField from "@material-ui/core/TextField";

    const OutlinedDiv = ( children, label ) =>
    return (
    <TextField
    variant="outlined"
    label=label
    InputLabelProps= shrink: true
    InputProps=
    inputComponent: ( className ) => (
    <div className=className>children</div>
    )

    />
    );
    ;
    export default OutlinedDiv;


    The className passed to the inputComponent takes care of the CSS that makes this all work. You can then use this like in the following:



    import React from "react";
    import ReactDOM from "react-dom";

    import OutlinedDiv from "./OutlinedDiv";
    import Avatar from "@material-ui/core/Avatar";
    import deepOrange from "@material-ui/core/colors/deepOrange";
    import deepPurple from "@material-ui/core/colors/deepPurple";
    import red from "@material-ui/core/colors/red";
    import green from "@material-ui/core/colors/green";
    import blue from "@material-ui/core/colors/blue";
    import Grid from "@material-ui/core/Grid";

    function App()
    return (
    <div className="App">
    <OutlinedDiv label="Color Picker">
    <Grid container justify="center" alignItems="center">
    <Avatar style= backgroundColor: deepOrange[500] />
    <Avatar style= backgroundColor: deepPurple[500] />
    <Avatar style= backgroundColor: red[500] />
    <Avatar style= backgroundColor: green[500] />
    <Avatar style= backgroundColor: blue[500] />
    </Grid>
    </OutlinedDiv>
    <br />
    <br />
    <OutlinedDiv label="Custom Outlined Thing">
    You can put whatever you want in here.
    </OutlinedDiv>
    </div>
    );


    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);


    Edit Custom Outlined Component






    share|improve this answer
































      0














      The outlined textfield was really tricky to implement. When pushing that feature, we had to consider several options, each with their own drawbacks



      1. SVG Element

      Easy to build and animate, but tough to scale with the surrounding elements. If we had gone this route, we would have needed to listen for some type of resize event, which would mean either using a window resize event, which is not robust, or using a newer and less supported feature such as a ResizeObserver/MutationObserver. There are polyfills, but that would have increased the bundle size about 2K for a relatively small feature.



      The SVG route is likely what will be used in the future. It is also worth noting that this is how Google's Material Components Web solves the problem.



      1. Plain old border with a background on the label

      This is by far the simplest approach, but it is also somewhat inflexible. You can see an example of this in Google's new sign-in flow. There they actually set the background color to white. This is probably a fine approach for plenty of users, but of course won't work if your background is a gradient or some similar edge case. That said, there's no need to worry about resize because it's just a border.



      1. Fieldset and legend

      This is what we ended up going with, largely because of its flexibility for end users. Fieldset and its legend component are both built-in ways of attaining pretty much this exact functionality. The big drawbacks to this are that styling across browsers is tough, and the properties we'd be animating on are not performant, such as legend width. Additionally, it's always best to use semantic HTML of course, which this is not, which means we need to use aria-hidden to instruct screen readers to ignore the element.



      Depending on your goals, any one of these solutions may work best for you. Beware that getting the perfect solution that solves all of these problems may be very tricky!






      share|improve this answer










      New contributor




      Eric Nagy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.



















        Your Answer






        StackExchange.ifUsing("editor", function ()
        StackExchange.using("externalEditor", function ()
        StackExchange.using("snippets", function ()
        StackExchange.snippets.init();
        );
        );
        , "code-snippets");

        StackExchange.ready(function()
        var channelOptions =
        tags: "".split(" "),
        id: "1"
        ;
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function()
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled)
        StackExchange.using("snippets", function()
        createEditor();
        );

        else
        createEditor();

        );

        function createEditor()
        StackExchange.prepareEditor(
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader:
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        ,
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        );



        );













        draft saved

        draft discarded


















        StackExchange.ready(
        function ()
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55032966%2fhow-can-i-imitate-the-look-of-the-outline-and-label-from-material-uis-outlined%23new-answer', 'question_page');

        );

        Post as a guest















        Required, but never shown

























        3 Answers
        3






        active

        oldest

        votes








        3 Answers
        3






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        0














        Just apply the same background color on the color div as the parent's background color, you can do it by background-color: inherit like this:



        <div style=inputContainerStyle>
        <div style=
        ...titleStyle,
        transform: 'translate(-43px, -11px) scale(0.75)',
        fontSize: '17px',
        color: 'rgba(0, 0, 0, 0.54)',
        position: 'absolute',
        background-color:'inherit' **(just add this line)**

        >
        Color
        </div>
        <div
        className="flex-row"
        style=
        border: '1px solid rgba(0, 0, 0, 0.23)',
        padding: '18.5px 14px',
        borderRadius: '4px',

        >

        availableColors.map(color => <div style=colorCircleStyle(color) />)

        </div>
        </div>





        share|improve this answer



























          0














          Just apply the same background color on the color div as the parent's background color, you can do it by background-color: inherit like this:



          <div style=inputContainerStyle>
          <div style=
          ...titleStyle,
          transform: 'translate(-43px, -11px) scale(0.75)',
          fontSize: '17px',
          color: 'rgba(0, 0, 0, 0.54)',
          position: 'absolute',
          background-color:'inherit' **(just add this line)**

          >
          Color
          </div>
          <div
          className="flex-row"
          style=
          border: '1px solid rgba(0, 0, 0, 0.23)',
          padding: '18.5px 14px',
          borderRadius: '4px',

          >

          availableColors.map(color => <div style=colorCircleStyle(color) />)

          </div>
          </div>





          share|improve this answer

























            0












            0








            0







            Just apply the same background color on the color div as the parent's background color, you can do it by background-color: inherit like this:



            <div style=inputContainerStyle>
            <div style=
            ...titleStyle,
            transform: 'translate(-43px, -11px) scale(0.75)',
            fontSize: '17px',
            color: 'rgba(0, 0, 0, 0.54)',
            position: 'absolute',
            background-color:'inherit' **(just add this line)**

            >
            Color
            </div>
            <div
            className="flex-row"
            style=
            border: '1px solid rgba(0, 0, 0, 0.23)',
            padding: '18.5px 14px',
            borderRadius: '4px',

            >

            availableColors.map(color => <div style=colorCircleStyle(color) />)

            </div>
            </div>





            share|improve this answer













            Just apply the same background color on the color div as the parent's background color, you can do it by background-color: inherit like this:



            <div style=inputContainerStyle>
            <div style=
            ...titleStyle,
            transform: 'translate(-43px, -11px) scale(0.75)',
            fontSize: '17px',
            color: 'rgba(0, 0, 0, 0.54)',
            position: 'absolute',
            background-color:'inherit' **(just add this line)**

            >
            Color
            </div>
            <div
            className="flex-row"
            style=
            border: '1px solid rgba(0, 0, 0, 0.23)',
            padding: '18.5px 14px',
            borderRadius: '4px',

            >

            availableColors.map(color => <div style=colorCircleStyle(color) />)

            </div>
            </div>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Mar 7 at 5:12









            Awab IjazAwab Ijaz

            113




            113























                0














                There is a great deal of flexibility in what you can do with TextField. TextField supports plugging in different types of inputs (e.g. Select, input, custom pickers) via the inputComponent property. You could leverage this to put anything inside its labelled outline by creating a custom component like this OutlinedDiv:



                import React from "react";

                import TextField from "@material-ui/core/TextField";

                const OutlinedDiv = ( children, label ) =>
                return (
                <TextField
                variant="outlined"
                label=label
                InputLabelProps= shrink: true
                InputProps=
                inputComponent: ( className ) => (
                <div className=className>children</div>
                )

                />
                );
                ;
                export default OutlinedDiv;


                The className passed to the inputComponent takes care of the CSS that makes this all work. You can then use this like in the following:



                import React from "react";
                import ReactDOM from "react-dom";

                import OutlinedDiv from "./OutlinedDiv";
                import Avatar from "@material-ui/core/Avatar";
                import deepOrange from "@material-ui/core/colors/deepOrange";
                import deepPurple from "@material-ui/core/colors/deepPurple";
                import red from "@material-ui/core/colors/red";
                import green from "@material-ui/core/colors/green";
                import blue from "@material-ui/core/colors/blue";
                import Grid from "@material-ui/core/Grid";

                function App()
                return (
                <div className="App">
                <OutlinedDiv label="Color Picker">
                <Grid container justify="center" alignItems="center">
                <Avatar style= backgroundColor: deepOrange[500] />
                <Avatar style= backgroundColor: deepPurple[500] />
                <Avatar style= backgroundColor: red[500] />
                <Avatar style= backgroundColor: green[500] />
                <Avatar style= backgroundColor: blue[500] />
                </Grid>
                </OutlinedDiv>
                <br />
                <br />
                <OutlinedDiv label="Custom Outlined Thing">
                You can put whatever you want in here.
                </OutlinedDiv>
                </div>
                );


                const rootElement = document.getElementById("root");
                ReactDOM.render(<App />, rootElement);


                Edit Custom Outlined Component






                share|improve this answer





























                  0














                  There is a great deal of flexibility in what you can do with TextField. TextField supports plugging in different types of inputs (e.g. Select, input, custom pickers) via the inputComponent property. You could leverage this to put anything inside its labelled outline by creating a custom component like this OutlinedDiv:



                  import React from "react";

                  import TextField from "@material-ui/core/TextField";

                  const OutlinedDiv = ( children, label ) =>
                  return (
                  <TextField
                  variant="outlined"
                  label=label
                  InputLabelProps= shrink: true
                  InputProps=
                  inputComponent: ( className ) => (
                  <div className=className>children</div>
                  )

                  />
                  );
                  ;
                  export default OutlinedDiv;


                  The className passed to the inputComponent takes care of the CSS that makes this all work. You can then use this like in the following:



                  import React from "react";
                  import ReactDOM from "react-dom";

                  import OutlinedDiv from "./OutlinedDiv";
                  import Avatar from "@material-ui/core/Avatar";
                  import deepOrange from "@material-ui/core/colors/deepOrange";
                  import deepPurple from "@material-ui/core/colors/deepPurple";
                  import red from "@material-ui/core/colors/red";
                  import green from "@material-ui/core/colors/green";
                  import blue from "@material-ui/core/colors/blue";
                  import Grid from "@material-ui/core/Grid";

                  function App()
                  return (
                  <div className="App">
                  <OutlinedDiv label="Color Picker">
                  <Grid container justify="center" alignItems="center">
                  <Avatar style= backgroundColor: deepOrange[500] />
                  <Avatar style= backgroundColor: deepPurple[500] />
                  <Avatar style= backgroundColor: red[500] />
                  <Avatar style= backgroundColor: green[500] />
                  <Avatar style= backgroundColor: blue[500] />
                  </Grid>
                  </OutlinedDiv>
                  <br />
                  <br />
                  <OutlinedDiv label="Custom Outlined Thing">
                  You can put whatever you want in here.
                  </OutlinedDiv>
                  </div>
                  );


                  const rootElement = document.getElementById("root");
                  ReactDOM.render(<App />, rootElement);


                  Edit Custom Outlined Component






                  share|improve this answer



























                    0












                    0








                    0







                    There is a great deal of flexibility in what you can do with TextField. TextField supports plugging in different types of inputs (e.g. Select, input, custom pickers) via the inputComponent property. You could leverage this to put anything inside its labelled outline by creating a custom component like this OutlinedDiv:



                    import React from "react";

                    import TextField from "@material-ui/core/TextField";

                    const OutlinedDiv = ( children, label ) =>
                    return (
                    <TextField
                    variant="outlined"
                    label=label
                    InputLabelProps= shrink: true
                    InputProps=
                    inputComponent: ( className ) => (
                    <div className=className>children</div>
                    )

                    />
                    );
                    ;
                    export default OutlinedDiv;


                    The className passed to the inputComponent takes care of the CSS that makes this all work. You can then use this like in the following:



                    import React from "react";
                    import ReactDOM from "react-dom";

                    import OutlinedDiv from "./OutlinedDiv";
                    import Avatar from "@material-ui/core/Avatar";
                    import deepOrange from "@material-ui/core/colors/deepOrange";
                    import deepPurple from "@material-ui/core/colors/deepPurple";
                    import red from "@material-ui/core/colors/red";
                    import green from "@material-ui/core/colors/green";
                    import blue from "@material-ui/core/colors/blue";
                    import Grid from "@material-ui/core/Grid";

                    function App()
                    return (
                    <div className="App">
                    <OutlinedDiv label="Color Picker">
                    <Grid container justify="center" alignItems="center">
                    <Avatar style= backgroundColor: deepOrange[500] />
                    <Avatar style= backgroundColor: deepPurple[500] />
                    <Avatar style= backgroundColor: red[500] />
                    <Avatar style= backgroundColor: green[500] />
                    <Avatar style= backgroundColor: blue[500] />
                    </Grid>
                    </OutlinedDiv>
                    <br />
                    <br />
                    <OutlinedDiv label="Custom Outlined Thing">
                    You can put whatever you want in here.
                    </OutlinedDiv>
                    </div>
                    );


                    const rootElement = document.getElementById("root");
                    ReactDOM.render(<App />, rootElement);


                    Edit Custom Outlined Component






                    share|improve this answer















                    There is a great deal of flexibility in what you can do with TextField. TextField supports plugging in different types of inputs (e.g. Select, input, custom pickers) via the inputComponent property. You could leverage this to put anything inside its labelled outline by creating a custom component like this OutlinedDiv:



                    import React from "react";

                    import TextField from "@material-ui/core/TextField";

                    const OutlinedDiv = ( children, label ) =>
                    return (
                    <TextField
                    variant="outlined"
                    label=label
                    InputLabelProps= shrink: true
                    InputProps=
                    inputComponent: ( className ) => (
                    <div className=className>children</div>
                    )

                    />
                    );
                    ;
                    export default OutlinedDiv;


                    The className passed to the inputComponent takes care of the CSS that makes this all work. You can then use this like in the following:



                    import React from "react";
                    import ReactDOM from "react-dom";

                    import OutlinedDiv from "./OutlinedDiv";
                    import Avatar from "@material-ui/core/Avatar";
                    import deepOrange from "@material-ui/core/colors/deepOrange";
                    import deepPurple from "@material-ui/core/colors/deepPurple";
                    import red from "@material-ui/core/colors/red";
                    import green from "@material-ui/core/colors/green";
                    import blue from "@material-ui/core/colors/blue";
                    import Grid from "@material-ui/core/Grid";

                    function App()
                    return (
                    <div className="App">
                    <OutlinedDiv label="Color Picker">
                    <Grid container justify="center" alignItems="center">
                    <Avatar style= backgroundColor: deepOrange[500] />
                    <Avatar style= backgroundColor: deepPurple[500] />
                    <Avatar style= backgroundColor: red[500] />
                    <Avatar style= backgroundColor: green[500] />
                    <Avatar style= backgroundColor: blue[500] />
                    </Grid>
                    </OutlinedDiv>
                    <br />
                    <br />
                    <OutlinedDiv label="Custom Outlined Thing">
                    You can put whatever you want in here.
                    </OutlinedDiv>
                    </div>
                    );


                    const rootElement = document.getElementById("root");
                    ReactDOM.render(<App />, rootElement);


                    Edit Custom Outlined Component







                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Mar 7 at 12:04

























                    answered Mar 7 at 4:46









                    Ryan CogswellRyan Cogswell

                    5,1111624




                    5,1111624





















                        0














                        The outlined textfield was really tricky to implement. When pushing that feature, we had to consider several options, each with their own drawbacks



                        1. SVG Element

                        Easy to build and animate, but tough to scale with the surrounding elements. If we had gone this route, we would have needed to listen for some type of resize event, which would mean either using a window resize event, which is not robust, or using a newer and less supported feature such as a ResizeObserver/MutationObserver. There are polyfills, but that would have increased the bundle size about 2K for a relatively small feature.



                        The SVG route is likely what will be used in the future. It is also worth noting that this is how Google's Material Components Web solves the problem.



                        1. Plain old border with a background on the label

                        This is by far the simplest approach, but it is also somewhat inflexible. You can see an example of this in Google's new sign-in flow. There they actually set the background color to white. This is probably a fine approach for plenty of users, but of course won't work if your background is a gradient or some similar edge case. That said, there's no need to worry about resize because it's just a border.



                        1. Fieldset and legend

                        This is what we ended up going with, largely because of its flexibility for end users. Fieldset and its legend component are both built-in ways of attaining pretty much this exact functionality. The big drawbacks to this are that styling across browsers is tough, and the properties we'd be animating on are not performant, such as legend width. Additionally, it's always best to use semantic HTML of course, which this is not, which means we need to use aria-hidden to instruct screen readers to ignore the element.



                        Depending on your goals, any one of these solutions may work best for you. Beware that getting the perfect solution that solves all of these problems may be very tricky!






                        share|improve this answer










                        New contributor




                        Eric Nagy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                        Check out our Code of Conduct.
























                          0














                          The outlined textfield was really tricky to implement. When pushing that feature, we had to consider several options, each with their own drawbacks



                          1. SVG Element

                          Easy to build and animate, but tough to scale with the surrounding elements. If we had gone this route, we would have needed to listen for some type of resize event, which would mean either using a window resize event, which is not robust, or using a newer and less supported feature such as a ResizeObserver/MutationObserver. There are polyfills, but that would have increased the bundle size about 2K for a relatively small feature.



                          The SVG route is likely what will be used in the future. It is also worth noting that this is how Google's Material Components Web solves the problem.



                          1. Plain old border with a background on the label

                          This is by far the simplest approach, but it is also somewhat inflexible. You can see an example of this in Google's new sign-in flow. There they actually set the background color to white. This is probably a fine approach for plenty of users, but of course won't work if your background is a gradient or some similar edge case. That said, there's no need to worry about resize because it's just a border.



                          1. Fieldset and legend

                          This is what we ended up going with, largely because of its flexibility for end users. Fieldset and its legend component are both built-in ways of attaining pretty much this exact functionality. The big drawbacks to this are that styling across browsers is tough, and the properties we'd be animating on are not performant, such as legend width. Additionally, it's always best to use semantic HTML of course, which this is not, which means we need to use aria-hidden to instruct screen readers to ignore the element.



                          Depending on your goals, any one of these solutions may work best for you. Beware that getting the perfect solution that solves all of these problems may be very tricky!






                          share|improve this answer










                          New contributor




                          Eric Nagy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                          Check out our Code of Conduct.






















                            0












                            0








                            0







                            The outlined textfield was really tricky to implement. When pushing that feature, we had to consider several options, each with their own drawbacks



                            1. SVG Element

                            Easy to build and animate, but tough to scale with the surrounding elements. If we had gone this route, we would have needed to listen for some type of resize event, which would mean either using a window resize event, which is not robust, or using a newer and less supported feature such as a ResizeObserver/MutationObserver. There are polyfills, but that would have increased the bundle size about 2K for a relatively small feature.



                            The SVG route is likely what will be used in the future. It is also worth noting that this is how Google's Material Components Web solves the problem.



                            1. Plain old border with a background on the label

                            This is by far the simplest approach, but it is also somewhat inflexible. You can see an example of this in Google's new sign-in flow. There they actually set the background color to white. This is probably a fine approach for plenty of users, but of course won't work if your background is a gradient or some similar edge case. That said, there's no need to worry about resize because it's just a border.



                            1. Fieldset and legend

                            This is what we ended up going with, largely because of its flexibility for end users. Fieldset and its legend component are both built-in ways of attaining pretty much this exact functionality. The big drawbacks to this are that styling across browsers is tough, and the properties we'd be animating on are not performant, such as legend width. Additionally, it's always best to use semantic HTML of course, which this is not, which means we need to use aria-hidden to instruct screen readers to ignore the element.



                            Depending on your goals, any one of these solutions may work best for you. Beware that getting the perfect solution that solves all of these problems may be very tricky!






                            share|improve this answer










                            New contributor




                            Eric Nagy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.










                            The outlined textfield was really tricky to implement. When pushing that feature, we had to consider several options, each with their own drawbacks



                            1. SVG Element

                            Easy to build and animate, but tough to scale with the surrounding elements. If we had gone this route, we would have needed to listen for some type of resize event, which would mean either using a window resize event, which is not robust, or using a newer and less supported feature such as a ResizeObserver/MutationObserver. There are polyfills, but that would have increased the bundle size about 2K for a relatively small feature.



                            The SVG route is likely what will be used in the future. It is also worth noting that this is how Google's Material Components Web solves the problem.



                            1. Plain old border with a background on the label

                            This is by far the simplest approach, but it is also somewhat inflexible. You can see an example of this in Google's new sign-in flow. There they actually set the background color to white. This is probably a fine approach for plenty of users, but of course won't work if your background is a gradient or some similar edge case. That said, there's no need to worry about resize because it's just a border.



                            1. Fieldset and legend

                            This is what we ended up going with, largely because of its flexibility for end users. Fieldset and its legend component are both built-in ways of attaining pretty much this exact functionality. The big drawbacks to this are that styling across browsers is tough, and the properties we'd be animating on are not performant, such as legend width. Additionally, it's always best to use semantic HTML of course, which this is not, which means we need to use aria-hidden to instruct screen readers to ignore the element.



                            Depending on your goals, any one of these solutions may work best for you. Beware that getting the perfect solution that solves all of these problems may be very tricky!







                            share|improve this answer










                            New contributor




                            Eric Nagy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.









                            share|improve this answer



                            share|improve this answer








                            edited 2 days ago





















                            New contributor




                            Eric Nagy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.









                            answered 2 days ago









                            Eric NagyEric Nagy

                            11




                            11




                            New contributor




                            Eric Nagy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.





                            New contributor





                            Eric Nagy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.






                            Eric Nagy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                            Check out our Code of Conduct.



























                                draft saved

                                draft discarded
















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid


                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.

                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function ()
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55032966%2fhow-can-i-imitate-the-look-of-the-outline-and-label-from-material-uis-outlined%23new-answer', 'question_page');

                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

                                2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

                                Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme