Removing web outline in textinput

Environment

react-native-paper: 3.0.0

Ask your Question

When using textinput with react-native-web it appears an additional line surrounding the input (I have tested it in chrome). In the flat mode, it is ok, but in the outlined, this line crosses out the label when focusing on the input as shown in the image:

Researching a little bit, I have found a solution that consists in adding to the input style outline: 'none'. In order not to affect the visualization in Android and IOs this line should be placed inside a Platform selection like:

Platform.select({
    web: {
        input: {
          outline: 'none',
    },
}

I have been trying to inject this style into the input but I have not found a way to do it. How can I do it?

Inserting this style line directly in the browser’s element inspector solves the problem:

[venits]

The easiest way:

In you web project add something like this to your index.css or somewhere where you handle CSS.

input {
  outline: none !important;
}

It will remove outline from all inputs on web 😃

[actuallymentor]

I ended up doing this:

import { Platform } from 'react-native'

const noGlow = `
textarea, select, input, button {
	-webkit-appearance: none;
	outline: none!important;
}
textarea:focus, select:focus, input:focus, button:focus {
	-webkit-appearance: none;
	outline: none!important;
}
`

export const injectWebCss = f => {

	// Only on web
	if ( !Platform.OS == 'web' ) return

	// Inject style
	const style = document.createElement('style')
	style.textContent = `textarea, select, input, button { outline: none!important; }`
	return document.head.append(style)

}

// 👉 And this in the App.js file
injectWebCss()