Is there a way of creating a striped css left-border within a textfield

Broken Mind 0
Viewed 22

I am trying to change this red border left colour into a stripped colour. Similar to this below. However within the borderLeftColor property I cannot achieve this effect.

enter image description here

enter image description here

Here is my current code

     <TextField
          name="title"
          label="Enter Something"
          id="title"
          variant="outlined"
          className={styles.banner}
        />

  banner: {
    '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
      borderLeftColor: 'red',
      borderLeftWidth: '6px',
    },
  },
css
1 Answers

use a background

input {
  font-size: 30px;
  padding: 20px;
  border: 1px solid;
  background: repeating-linear-gradient(135deg,red 0 5px, white 0 10px,blue 0 15px,white 0 20px) left/10px 100% no-repeat;
}
<input type="text">

Temani Afif0
Related