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 (7)
It is really a matter of concern geometry dash. Just one small wrong command and the program will definitely not run. Enjoyed researching and participating in different programs.
To style a disabled select element with a floating label Connections Unlimited and ensure it appears in a different color, you can use CSS to target the disabled state of the select element and adjust the appearance of its associated label.
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:
<img src="https://i.imgur.com/BOfzUov.png" alt="" class="w-100"/>
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.
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.
(sry for the value on textarea, but I can't edit it now for some reason)
