disabled select floating label different color
floating labels on select have different colors than on inputs/textareas when all are disabled, e.g.
<pre>
<div class="rounded border p-10">
<div class="form-floating mb-7">
<input type="email" id="floatingInput1" placeholder="name@example.com" class="form-control" disabled value="foo">
<label for="floatingInput1">Email address</label>
</div>
<div class="form-floating mb-7">
<select id="floatingSelect1" aria-label="Floating label select example" disabled class="form-select">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect1">Different color</label>
</div>
<div class="form-floating">
<textarea id="floatingTextarea1" class="form-control" disabled value="bar"></textarea>
<label for="floatingTextarea1">Comments</label>
</div>
</div>
<pre>
Replies (5)
(sry for the value on textarea, but I can't edit it now for some reason)
Hi,
Thanks for the heads-up.
Noted, we will check this further and update you with a solution as soon as possible by tomorrow.
Regards.
Hi,
Sorry for the late reply.
We have just checked it with Metronic v8.2.0, the recent update, and the disabled mode for input and selects looks the same:
May I know your version of Metronic ? Also can you please provide us screenshots using https://imgur.com/
Regards.
Hi,
we're using keen v3.0.5 (demo6).
https://imgur.com/a/3mh4sZA
(I think I had the same problem with select2, but I'm not sure now)
Hi,
We have simulated the disabled floating input with preset value and got the same style:
We will release this improvement in the next update of Keen.
In the meantime you can customize it by editing src/sass/components/forms/_floating-labels.scss
.form-floating {
.form-control.form-control-solid {
&::placeholder {
color: transparent;
}
}
&.form-control-solid-bg label,
> :disabled ~ label,
> :focus ~ label {
&::after {
background-color: transparent !important;
}
}
}Then you can have a unified style for floating form input, select, and select2 controls. For Floating select2 please use the below markup:
<pre>
<!--begin::Input group-->
<div class="form-floating mb-7">
<select class="form-select" >
<option></option>
</select>
<label>Coin Name</label>
</div>
<!--end::Input group-->
Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are only required in the development environment to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
