Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't remove black border around input with style options

See original GitHub issue

Screenshot

<View
  style={styles.serviceSelect}
  animation="bounceInUp">
  <SearchBar
    noIcon
    selectionColor="orange"
    autoCorrect={false}
    style={{margin: 0, padding: 0}}
    placeholderTextColor="orange"
    placeholder="TAP TO FIND SERVICE"
    containerStyle={{
                      borderRadius: 3,
                      borderWidth: 0,
                      padding: 0,
                      margin: 0
    }}
    inputStyle={{
                  borderWidth: 0,
                  paddingTop: 0,
                  paddingBottom: 0,
                  backgroundColor: '#333',
                  fontFamily: 'matrix',
                  color: 'orange',
                  fontSize: 28,
                  textAlign: 'center',
                  paddingLeft: 16,
                  paddingRight: 16,
                  margin: 0,
                  height: 30
    }}
  />
</View>

const styles = StyleSheet.create({
  serviceSelect: {
    backgroundColor: '#333',
    left: '7.5%',
    width: '85%',
    position: 'absolute',
    top: 80,
    zIndex: 11,
    shadowRadius: 2.5,
    shadowOpacity: .3,
    paddingTop: 10, paddingBottom: 10,
    borderRadius: 3,
    shadowOffset: {width: 0, height: 4},
    borderWidth: 0
  }
});

I am trying to remove the black border surrounding the input. I have set borderWidth to 0 in both the containerStyle and inputStyle yet it is still showing.

Does anyone know how I can fix this?

My package.json:

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-native": "0.52.0",
    "react-native-animatable": "^1.2.4",
    "react-native-elements": "^0.19.0",
    "react-native-foldview": "^1.1.1",
    "react-native-maps": "^0.19.0",
    "react-native-permissions": "^1.0.6",
    "react-native-vector-icons": "^4.5.0",
    "react-navigation": "^1.0.0-beta.27"
  },
  "devDependencies": {
    "babel-jest": "22.1.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.1.4",
    "react-test-renderer": "16.2.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

Issue Analytics

State:
Created 6 years ago
Comments:6

Top GitHub Comments

2reactions

jskidd3commented, Jan 28, 2018

@iRoachie Life saver, thanks so much.

2reactions

iRoachiecommented, Jan 28, 2018

Apparently borderWidth can’t override borderTopWidth and borderBottomWidth defined here. https://github.com/react-native-training/react-native-elements/blob/v0.19.0/src/input/Search.js#L165-L166

Instead change your containerStyle to:

containerStyle={{
  borderRadius: 3,
  borderWidth: 0,
  borderTopWidth: 0,
  borderBottomWidth: 0,
  padding: 0,
  margin: 0
}}

Top Results From Across the Web

How to remove the border highlight on an input text element

In Bootstrap 4 to remove border outline you can use shadow-none , it will remove focus outline.

How to Remove Outline around Text Input Boxes in Chrome ...

Answer: Use CSS outline property ... In Google Chrome browser form controls like <input> , <textarea> and <select> highlighted with blue outline around...

How to Remove and Style the Border Around Text Input Boxes ...

Use outline: none to remove the ugly border color for a form field in Chrome. Learn also how to give your own style...

border-bottom - CSS: Cascading Style Sheets - MDN Web Docs

The border-bottom shorthand CSS property sets an element's bottom border. It sets the values of border-bottom-width, border-bottom-style and ...

Apply or remove cell borders on a worksheet - Microsoft Support

Click Format. On the Border tab, under Line, in the Style box, click the line style that you want to use for the...