Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Unable to remove input box border in React

I’ve been trying to remove the black box that appears when you click the input box, but it doesn not go away

  const renderSearch = () => {
    return (
      <View style={styles.searchSection}>
        <FaSearch style={styles.searchIcon} />
        <TextInput
          value={searchValue}
          onChangeText={(text) => onSearch(text)}
          placeholder="Search for a restaurant"
          style={styles.input}
        />
      </View>
    )
  }

  input: {
    flex: 1,
    height: '100%',
    width: '100%',
    color: '#424242',
    backgroundColor: 'transparent',
    borderWidth: 0, // Eliminar el borde
    padding: 0, // Eliminar el relleno
    fontSize: 16 // Ajustar el tamaño de la fuente según sea necesario
  },

Remove the black box

Tags:

2

Answers


  1. 0

    Are you referring to outline? The border that appears when you focus on the input.

    If so, try adding this css in your input:

      outline: none;
    Login or Signup to reply.
  2. 0

    You can try this

    <TextInput
  value={searchValue}
  onChangeText={(text) => onSearch(text)}
  placeholder="Search for a restaurant"
  style={styles.input}
  textInputProps={{ outline: 'none' }}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search