Styling The Placeholder in a Textfield

How to show both label and placeholder in material-ui TextField

you can force input label to shrink. https://mui.com/components/text-fields/#shrink

you can add input Text color with sx props on TextField. placeholder takes color from the input text color too. you can test this by removing inputProps props in below code.

if you want different colors for input text and placeholder use inputProps
ref: Styling the placeholder in a TextField

<TextField
  sx={{
    "& .MuiOutlinedInput-root": {
      color: "red"
    }
  }}
  variant="outlined"
  label="Your custom label"
  placeholder="Placeholder Text"
  InputLabelProps={{ shrink: true }}
  inputProps={{
    sx: {
      "&::placeholder": {
        color: "green"
      }
    }
  }}
/>

MUI Textfield placeholder text color looks faded

Some browsers (such as Firefox) set the default opacity of placeholders to something less than 100%.

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#opaque_text

So, you should set opacity of placeholder to 1

<TextField
   placeholder="hello"
   variant="outlined"
   sx={{
      input: {
         color: 'red',
         "&::placeholder": {    // <----- Add this.
            opacity: 1,
         },
      },
      label: { color: 'blue' }
   }}
/>

SwiftUI. How to change the placeholder color of the TextField?

There is no api for it (yet). BUT YOU CAN:

Use a custom placeholder modifier to show any view as the holder of any other view! e.g:

TextField("", text: $text)
    .placeholder(when: text.isEmpty) {
        Text("Placeholder recreated").foregroundColor(.gray)
}

It's a simple ZStack that you can in a View extension like:

extension View {
    func placeholder<Content: View>(
        when shouldShow: Bool,
        alignment: Alignment = .leading,
        @ViewBuilder placeholder: () -> Content) -> some View {

        ZStack(alignment: alignment) {
            placeholder().opacity(shouldShow ? 1 : 0)
            self
        }
    }
}

Now you can apply any kind of style to the placeholder like this gradient placeholder with image:

✅ If you are interested, Here is how to apply resizable gradient on any view

---

The Art of the simplicity

Most of the time you need to pass just a string and a gray placeholder like:

TextField("", text: $text)
    .placeholder("Placeholder", when: text.isEmpty)

you can write a simple wrapper around the above extension for it:

extension View {
    func placeholder(
        _ text: String,
        when shouldShow: Bool,
        alignment: Alignment = .leading) -> some View {
            
        placeholder(when: shouldShow, alignment: alignment) { Text(text).foregroundColor(.gray) }
    }
}

Just like that /h4>

MaterialUI - Styling an Input's placeholder text

Styled components in es6 you can use this, create constant with style

//this out side the class
const inputStyle = {
  fontFamily: 'Open Sans', 
  fontSize: 18.9px
};

<Input
   style={inputStyle}
   fullWidth={true}
   placeholder="Business Email Address"
   onChange={this._onChange}
/>

I hope this work with you

How Can I Adjust TextField Placeholder Color : SwiftUI

You cannot change the default color of the placeholder yet. However, you can achieve it by writing a custom TextField using either UITextField or UITextView. Here is an example where I created a custom TextArea View using UITextView where I can set custom color to the placeholder. See my comment below in makeUIView(_:)

struct TextArea: UIViewRepresentable {
    @State var placeholder: String
    @Binding var text: String

    func makeCoordinator() -> Coordinator {
        Coordinator(self, placeholder: placeholder)
    }

    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.text = placeholder

        // Here you can set the color for placeholder text as per your choice. 
        textView.textColor = .lightGray

        textView.delegate = context.coordinator
        return textView
    }

    func updateUIView(_ textView: UITextView, context: Context) {
        if !text.isEmpty {
            textView.text = text
            textView.textColor = .black
        }
    }

    class Coordinator: NSObject, UITextViewDelegate {
        var textArea: TextArea
        var placeholder: String

        init(_ textArea: TextArea, placeholder: String) {
            self.textArea = textArea
            self.placeholder = placeholder
        }

        func textViewDidBeginEditing(_ textView: UITextView) {
            if textView.textColor == .lightGray {
                textView.text = nil
                textView.textColor = .black
            }
        }

        func textViewDidEndEditing(_ textView: UITextView) {
            if textView.text.isEmpty {
                textView.text = placeholder
                textView.textColor = UIColor.lightGray
            }
        }
    }
}

EDIT:

The above text area can be used in the view like this:

 TextArea(placeholder: textValue, text: $textValue)

style the css of the placeholder

/* try this */
/* Attention: There is a space between & and ::-webkit-input-placeholder */

input: {
    marginLeft: 8,
    flex: 1,
    "& ::-webkit-input-placeholder": {
      color: "red !important"
    }
  }

Besides, set input placeholder like this

::-webkit-input-placeholder { /* WebKit browsers */
  color: "red"
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: "red"
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
 color: "red"
} 

How can I change the placeholder/label color inside a v-text-field?

You can do it by overwriting the CSS default classes:

.custom-placeholder-color input::placeholder {
  color: red !important;
  opacity: 1;
}

.custom-label-color .v-label {
  color: red;
  opacity: 1;
}

[EDIT]

You can change the input color to have the text red/any other color:

.custom-placeholder-color input,
.custom-label-color input{
  color: red !important;
}

Codepen updated here:

https://codepen.io/fabiozanchi/pen/RmQbBd

How to change styling of TextInput placeholder in React Native?

Improving on Daniel's answer for a more generic solution

class TextInput2 extends Component {
  constructor(props) {
    super(props);
    this.state = { placeholder: props.value.length == 0 }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(ev) {
    this.setState({ placeholder: ev.nativeEvent.text.length == 0 }); 
    this.props.onChange && this.props.onChange(ev); 
  }
  render() {
    const { placeholderStyle, style, onChange, ...rest } = this.props;

    return <TextInput 
      {...rest} 
      onChange={this.handleChange}
      style={this.state.placeholder ? [style, placeholderStyle] : style}
      />
  }
}

Usage:

<TextInput2 
  value={this.state.myText}
  style={{ fontFamily: "MyFont" }}
  placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>

---

Related Topics