Kevin Powell - Community•2y ago

Help with Select element CSS styles

What css attribute would make the border around the Select element be gone and which attribute would make the words appear half way cut off at the bottom of the element? When I inspect the select element this is what chrome shows for the styles on it:

.field__input, .customer .field input {
    flex-grow: 1;
    text-align: left;
    padding: 1.5rem;
    margin: var(--inputs-border-width);
    transition: box-shadow var(--duration-short) ease;
}
.field__input, .select__select, .customer .field input, .customer select {
    -webkit-appearance: none;
    appearance: none;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-size: 1.6rem;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow var(--duration-short) ease;
    border-radius: var(--inputs-radius);
    height: 4.5rem;
    min-height: calc(var(--inputs-border-width) * 2);
    min-width: calc(7rem + (var(--inputs-border-width) * 2));
    position: relative;
    border: 0;
}

.field__input, .customer .field input {
    flex-grow: 1;
    text-align: left;
    padding: 1.5rem;
    margin: var(--inputs-border-width);
    transition: box-shadow var(--duration-short) ease;
}
.field__input, .select__select, .customer .field input, .customer select {
    -webkit-appearance: none;
    appearance: none;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-size: 1.6rem;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow var(--duration-short) ease;
    border-radius: var(--inputs-radius);
    height: 4.5rem;
    min-height: calc(var(--inputs-border-width) * 2);
    min-width: calc(7rem + (var(--inputs-border-width) * 2));
    position: relative;
    border: 0;
}

2 Replies

Wolle•2y ago

I do not see anything, maybe a surrounding element is cutting it off? Or another element is overlaying it.

Mannix•2y ago

put this in a codepen 😉

Gaming

Programming

Help with Select element CSS styles