CSS: Change styles based on adjacent sibling

Question

I'm working on a pure CSS solution for displaying placeholder text in an input which also becomes the label above once focused, as seen in many Google Material frameworks.

I have the default state and the focus state working, but after the user enters a value I need to change the <label> style and can't figure out (if it's even possible) to read the adjacent input and if it's input:valid change the style of the <label>

I can't modify the hierarchy of the HTML due to honoring Bootstrap 4

<div class="form-group">
    <label class="placeholder" for="exampleInputEmail1">Email Address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
</div>

As you can see the <input> and <label> are on the same level, is there any way to change <label> based on the input:valid pseudoclass?

You can see a semi-working example here: https://codepen.io/FritzAPI/pen/ERMvvR

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Fritz Material Placeholder Start */
.form-group:focus-within label:not(.form-check-label):not(.custom-control-label) {
    color: #2196F3;
}
label:not(.form-check-label):not(.custom-control-label) {
    margin-bottom: 0px;
    color: rgba(0,0,0,0.54);
}
.form-group:focus-within label.placeholder:not(.form-check-label):not(.custom-control-label) {
    color: #2196F3;
    top: 0px;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
}
label.placeholder:not(.form-check-label):not(.custom-control-label) {
    margin-bottom: 0px;
    color: rgba(0,0,0,0.38);
    position: relative;
    top: 28px;
    font-size: 16px;
    margin-top: -2px;
    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
    z-index: -1;
}
/* Fritz Material End */

body {
  text-align: left;
  text-align: start;
  background-color: white;
  color: rgba(0, 0, 0, 0.87);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.428572;
  margin: 0;
}

/* Forms, Input Group Start */
.form-control:focus, .form-control-file:focus, .custom-select:focus {
  background-color: transparent;
  border-color: #2196f3;
  box-shadow: inset 0 -2px 0 -1px #2196f3;
  outline: 0;
}
.form-control, .form-control-file, .custom-select {
    height: 2.0rem;
    line-height: 1.428572;
    padding: 0.410714rem 0 0.348214rem;
    background-clip: padding-box;
    background-color: transparent;
    background-image: none;
    border-color: rgba(0, 0, 0, 0.42);
    border-radius: 0;
    border-style: solid;
    border-width: 0 0 1px;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.87);
    display: block;
    width: 100%;
}
/* Forms, Input Group End */

<div class="form-group">
    <label class="placeholder" for="exampleInputEmail1">Email Address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
</div>

After the <input> has a value I need the label to stay above the input when losing focus.

Please edit your question to describe what you want your code to do (how do you want to style the `` element based on the validity of the ``). and include the code in your question. Linking to a (nearly) working demo is a very useful and welcome bonus, but it's not a replacement for including the relevant [mcve] code in your question. — David Thomas, Jul 03 '18 at 17:04
@DavidThomas I added the code and the desired outcome to the question. — bfritz, Jul 03 '18 at 17:13
Many thanks! Given I'm currently on mobile - and that's a *lot* of 'minimal' code - the solutions I'd recommend are using either `display: flex` on the parent `.form-group` element, placing the `` after the ``, and using the `order` property (or reversing the flow) to reorder the contents so that the `` appears first. That, or do the same thing, but using CSS Grid and template-areas to reorder the content. — David Thomas, Jul 03 '18 at 17:16
@DavidThomas that's the core issue here, I can't change the order of the HTML as Bootstrap expects the label to be before the input. — bfritz, Jul 03 '18 at 17:24
Can you add class-names to the `.form-group` element to match the validity, then add - for example - `.form-group.hasValidInputElement > label` - to the selectors that translate the `` element's position? Because without reordering the HTML this won't be possible with pure CSS. At least not until/unless CSS `:has()` selector sees the light of day. — David Thomas, Jul 03 '18 at 17:43
@DavidThomas That's what I was afraid of, this became really easy once switching the order all I had to do was put my styles in `input:not(:valid) + label.placeholder` to get all 3 states working (default/focus/has value) — bfritz, Jul 03 '18 at 18:00
@DavidThomas in case you wanted to see it working using your flex order hack: https://codepen.io/FritzAPI/pen/KeYgGm — bfritz, Jul 05 '18 at 21:40

CSS: Change styles based on adjacent sibling

0 Answers0