remove dropdown border

[jacko06v]

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:

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

[sanusart]

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

[jacko06v]

@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:

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

[sanusart]

Hey. You can edit the “react-dropdown-select-dropdown” class to style it.

On Fri, 16 Feb 2024 at 8:37 PM Jacopo @.***> wrote:

@sanusart https://github.com/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.png (view on web) https://github.com/sanusart/react-dropdown-select/assets/76396947/d4800470-aa5e-4643-adc3-76e121ef53ac

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

— Reply to this email directly, view it on GitHub https://github.com/sanusart/react-dropdown-select/issues/310#issuecomment-1949087114, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACBLRXMJIYX3DPW6KYPXYDYT6ROPAVCNFSM6AAAAABDL367TOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBZGA4DOMJRGQ . You are receiving this because you were mentioned.Message ID: @.***>

[jacko06v]

thanks, react-dropdown-select-dropdown class worked: