sanusart/react-dropdown-select

remove dropdown border

jacko06v opened this issue · 4 comments

hi!
checked other user's code and docs, but didn't find anything
i changed the dropdown color with dropdownrenderer like that:

 dropdownRenderer={({ props, state, methods }) => {
          return (
            <div
              style={{
                backgroundColor: "#16102c",
                width: "10rem",
              }}
            >
              <input
                type="text"
                onChange={(e) => methods.setSearch(e.target.value)}
                value={state.search}
                placeholder="Search Network"
                style={{
                  width: "100%",
                  padding: "10px",
                  backgroundColor: "#16102c",
                  color: "white",
                  border: "none",
                  borderBottom: "1px solid #6853ad",
                  outline: "none",
                }}
              />
              <div>
                {props.options.map((item, index) => (
                  <div
                    key={index}
                    onClick={() => methods.addItem(item)}
                    style={{
                      backgroundColor: "#16102c",
                      padding: "10px",
                      margin: "5px",
                    }}
                    className="react-dropdown-select-item flex items-center"
                  >
                    <img
                      src={item.link_image}
                      alt={item.label}
                      className="w-6 h-6 mr-2"
                      style={{ borderRadius: "50%" }}
                    />
                    {item.label}
                  </div>
                ))}
              </div>
            </div>
          );
        }}

this is what i got:

Screenshot 2024-02-16 alle 12 29 09

i would like to remove the white border and add a border radius, but i can't do that

Just add style to the forst div element. Or check what css classes available

@sanusart alredy tried, doesn't change, if i try to add a border and make a border radius it add to the purple block:

first div:


<div
                  style={{
                    backgroundColor: "#16102c",
                    width: "100%",
                    border: "3px solid #6853ad",
                    borderRadius: "20px",
                    outline: "none",
                  }}
                >

result:

Screenshot 2024-02-16 alle 19 36 41

it seems like a div inside a div, and i can edit just the child div

thanks, react-dropdown-select-dropdown class worked:
Screenshot 2024-02-17 alle 02 49 38