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:

Material Design Example:


  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.

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.

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

Tips for displaying a pop-up when pressing a link:

What is the best way to make an element disappear 5 seconds after the mouse has stopped hovering

Using the window.setInterval() method to add jQuery/AJAX scripts to elements at regular intervals of 60 seconds

Problem with padding in Firefox when using jQuery's css() methodInconsistent behavior with padding property in

Using Multiple SCSS Files to Reference a Centralized Style Sheet

Vertical Divider in Material UI Grid not displaying properly

Enhancing User Experience with CSS Transitions for Faster Page Loading

The edge of the 'parent' element is obscured by the :after element

What causes an absolutely positioned element to be positioned by its sibling rather than at the top corner of the page?

What is the method for retrieving the value from the input box instead of the selected list item on autocomplete using material ui?

There seems to be an issue with the React Native FlatList: It appears that there is no overload matching this call and some

What is causing the issue with TypeScript's React.createRef() and its compatibility with the material-ui Button element?

The entire framework remains concealed as the anchor component becomes immeasurable

Encountering a findDOMNode error while using the select menu in React's material

Combine multiple SCSS files located in various directories into a single CSS file by using NPM

Having trouble running the npm script due to a multitude of errors popping up

Struggling with smoothly transitioning an image into view using CSS and JavaScript

Is it still beneficial to incorporate image sprites in the design of a mobile web app?

Enhanced JQuery Functionality with Additional Parameters

Switching icon images using JQuery based on state changes