13 replies

SOLVED: select element not respecting grid cell- heights gonna height

Edit: Heights will cause overflow have you heard??

it can’t be a block size of 100% when it has a sibling taking half

##New Problem:
i have html {color-scheme: dark } and if iset the select background-color to transparent, the dropdown is white and i cant see the options. is there a way to make the trigger button/box transparent but see the dropdown options?

I havent yet thrown this in a codepen but i am puzzled why this standard select element when applying block-size: 100% escapes outside of its parent. I couldn’t find anything in the dev tools styles that would account for this.

The relevant html is as follows:
-form
-fieldset > input + label (*5)
-fieldset > select + label
-fieldset.span-2 > textarea + label
-fieldset.span-2 > checkbox + label
-button

the relevant css:

form {grid-template-columns: 1fr 1fr; gap: 1em;}

.span-2 {grid-column: span 2;}

fieldset:has(select) { outline: 1px solid red; }

select {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

form {grid-template-columns: 1fr 1fr; gap: 1em;}

.span-2 {grid-column: span 2;}

fieldset:has(select) { outline: 1px solid red; }

select {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

as you can see when given a block-size of 100%, it escapes out of its fieldset parent (the red outline)? why?? I know i will probably have to wipe all the styles anyway and build a custom select element but I am so confused as to why it can escape outside of its parent/cell.

KP-C

Kevin Powell - Community•2y ago•

13 replies

curiousmissfox

SOLVED: select element not respecting grid cell- heights gonna height

Edit: Heights will cause overflow have you heard??

form {grid-template-columns: 1fr 1fr; gap: 1em;}

.span-2 {grid-column: span 2;}

fieldset:has(select) { outline: 1px solid red; }

select {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

form {grid-template-columns: 1fr 1fr; gap: 1em;}

.span-2 {grid-column: span 2;}

fieldset:has(select) { outline: 1px solid red; }

select {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

SOLVED: select element not respecting grid cell- heights gonna height

SOLVED: select element not respecting grid cell- heights gonna height

Similar Threads

Similar Threads

Similar Threads