How to style material-ui input with outlined variant using css

Question

How to style material-ui input with outlined variant using css

Currently, I am attempting to replicate the material-ui outlined input. The background color and input styles are different, so simply setting the label position to absolute and pushing it up is not working for me. Any suggestions on how to achieve this?

Here is my current CSS implementation: https://i.sstatic.net/fABFa.png

Material Design Example: https://i.sstatic.net/pUqQY.png


  inputStyle: {
    padding: 10,
    borderBottomWidth: 0,
  },
  labelStyle: {
    color: colors.black,
    marginBottom: 5,
    top: props.isFocused ? -6 : 12,
    opacity: props.isFocused ? 1 : 0.8,
    left: 6,
    zIndex: 100,
    position: 'absolute',
    display: 'inline-block',
    fontSize: props.isFocused ? 12 : 16,
    fontWeight: 400,
    backgroundColor: colors.white,
  },
  inputContainerStyle: {
    width: '100%',
    borderColor: handleInputBorder(props.error),
    borderRadius: 5,
    borderWidth: 1,
    backgroundColor: colors.white,
    marginBottom: 10,
  },
  containerStyle: {
    paddingLeft: 0,
    paddingRight: 0,
  },
  rightIcon: props.rightIcon,

css react-native material-ui

Answer 1

Answer №1

After some consideration, I have made the choice to change the background color of the label to match the screen's background and move it slightly higher up on the page. It appears that this adjustment has resolved the problem I was experiencing.

Answer 2

After some consideration, I have made the choice to change the background color of the label to match the screen's background and move it slightly higher up on the page. It appears that this adjustment has resolved the problem I was experiencing.

Answer 3

Answer №2

While working with react.js, I have implemented a similar functionality.

https://i.sstatic.net/eLQL3.png https://i.sstatic.net/o8UdH.png https://i.sstatic.net/NJqGm.png

Here is my approach to the solution.

MaterialInput.js

import React, { useEffect, useState } from 'react';
import { allColors } from '../../../shared/styles/index';
import './MaterialInput.scss';
import Eye from '../../../shared/images/eye.svg';
import HiddePassword from '../../../shared/images/hiddePassword.svg';

export default function Login() {
    const [labelColor, setLabelColor] = useState('#9d9994');
    const [inputColor, setInputColor] = useState('#d6d6d6');
    const [showButton, setShowButton] = useState(false);
    const [showPassword, setShowPassword] = useState(false);
    const [inputValue, setInputValue] = useState('');

    useEffect(() => {
        if (inputValue.length && !showButton) return setShowButton(true);
        if (!inputValue.length) setShowButton(false);
    }, [inputValue]);

    const handleInputButton = () => {
        setShowPassword(!showPassword);
    }

    const handleOnFocus = () => {
        setLabelColor('#ff4f00');
        setInputColor('#ff4f00');
    }

    const handleOnBlur = () => {
        setLabelColor(inputValue ? '#696158' : '#9d9994');
        setInputColor('#d6d6d6');
    }

    const handleChange = (event) => {
        setInputValue(event.target.value);
    }

    return (
            <>
               <form style={{ paddingTop: '1em' }}>
                  <div style={{ borderColor: inputColor }} className="group">      
                     <input onChange={handleChange} value={inputValue} onFocus={handleOnFocus} onBlur={handleOnBlur} type={showPassword ? 'text' : 'password'} id="material-input" required/>
                     <label style={{ color: labelColor }} id="material-input-label">Password</label>
                     <button onClick={handleInputButton} style={{ width: '3.3em', outline: 'none',  position: 'relative' }} type="button">
                {showButton && <img src={showPassword ? HiddePassword : Eye} />}
                    </button>
               </div>
           </form>
        </>
        )
      };

MaterialInput.scss

.group { 
  border:2px solid;
  border-radius: 8px;
  height: 48px;
  position: relative;
}

input  {
  font-size:14px;
  padding:10px 10px 10px 5px;
  width:300px;
  border:none;
  height: 44px;
  color: #696158;
  padding-right: 15px;
  padding-left: 15px; 
  border-radius: 8px;
  &:focus {
    outline:none;
  }
}


label                {
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:15px;
  top:13px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
  background-color: white;
  padding-right: 0.3em;
  padding-left: 0.3em;
  display: flex;
  justify-content: center;
}

input:focus ~ label, input:valid ~ label  {
  top:-7px;
  font-size:12px;
  font-weight: 600;
}

::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    position: absolute;
    right: 0;
}

input:required {
    box-shadow:none;
}

Answer 4

While working with react.js, I have implemented a similar functionality.

https://i.sstatic.net/eLQL3.png https://i.sstatic.net/o8UdH.png https://i.sstatic.net/NJqGm.png

Here is my approach to the solution.

MaterialInput.js

import React, { useEffect, useState } from 'react';
import { allColors } from '../../../shared/styles/index';
import './MaterialInput.scss';
import Eye from '../../../shared/images/eye.svg';
import HiddePassword from '../../../shared/images/hiddePassword.svg';

export default function Login() {
    const [labelColor, setLabelColor] = useState('#9d9994');
    const [inputColor, setInputColor] = useState('#d6d6d6');
    const [showButton, setShowButton] = useState(false);
    const [showPassword, setShowPassword] = useState(false);
    const [inputValue, setInputValue] = useState('');

    useEffect(() => {
        if (inputValue.length && !showButton) return setShowButton(true);
        if (!inputValue.length) setShowButton(false);
    }, [inputValue]);

    const handleInputButton = () => {
        setShowPassword(!showPassword);
    }

    const handleOnFocus = () => {
        setLabelColor('#ff4f00');
        setInputColor('#ff4f00');
    }

    const handleOnBlur = () => {
        setLabelColor(inputValue ? '#696158' : '#9d9994');
        setInputColor('#d6d6d6');
    }

    const handleChange = (event) => {
        setInputValue(event.target.value);
    }

    return (
            <>
               <form style={{ paddingTop: '1em' }}>
                  <div style={{ borderColor: inputColor }} className="group">      
                     <input onChange={handleChange} value={inputValue} onFocus={handleOnFocus} onBlur={handleOnBlur} type={showPassword ? 'text' : 'password'} id="material-input" required/>
                     <label style={{ color: labelColor }} id="material-input-label">Password</label>
                     <button onClick={handleInputButton} style={{ width: '3.3em', outline: 'none',  position: 'relative' }} type="button">
                {showButton && <img src={showPassword ? HiddePassword : Eye} />}
                    </button>
               </div>
           </form>
        </>
        )
      };

MaterialInput.scss

.group { 
  border:2px solid;
  border-radius: 8px;
  height: 48px;
  position: relative;
}

input  {
  font-size:14px;
  padding:10px 10px 10px 5px;
  width:300px;
  border:none;
  height: 44px;
  color: #696158;
  padding-right: 15px;
  padding-left: 15px; 
  border-radius: 8px;
  &:focus {
    outline:none;
  }
}


label                {
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:15px;
  top:13px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
  background-color: white;
  padding-right: 0.3em;
  padding-left: 0.3em;
  display: flex;
  justify-content: center;
}

input:focus ~ label, input:valid ~ label  {
  top:-7px;
  font-size:12px;
  font-weight: 600;
}

::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    position: absolute;
    right: 0;
}

input:required {
    box-shadow:none;
}

How to style material-ui input with outlined variant using css

Answer №1

Answer №2

Similar questions

Different hover effects for Material-UI [v0.x] RaisedButton

Exploring the unique scrolling attributes of Cypress: `get` method and relative positioning

Is the `visibility: hidden` property not functioning as expected?

Change the class of an element only within the div that is directly below it

The img-fluid class is not properly adjusting the height of the image

Customizing Material UI: Grouping Tab components within a div container

Using Stack and Drawer Navigations Together in React Native Navigation(v6)

I'm having trouble anchoring my images to a specific spot on the webpage in HTML

I'm trying to understand why this code isn't running properly. Can someone explain why my CSS is not being executed?

The element's height appears to be fluctuating unexpectedly when I attempt to adjust it using percentage values within a narrow range

Tips on adjusting the SVG view box for optimal visibility in a web browser

Adjusting the tab size and space size to their default settings within VSCode

Ways to center items in a row-oriented collection

What are some ways to implement webkit-line-clamp on a website?

Ensuring Smooth Alignment of CSS Divs

Relocating to the middle of the webpage (Automatically resize for mobile compatibility if feasible)

Tips for displaying multiple rows horizontallyALLOWING multiple rows to appear horizontally can be achieved by

How to align items at the center in material-ui styling

how do I address the issue of Property 'navigation' not being found in type 'Readonly<{}> &'?

Ensure that the navigation menu is consistently displayed properly, without any of its contents extending beyond the