CODEWITHSUNDEEP
htmlcsshexcolor-picker
Ramiro
Ramiro

Reputation: 127

input type color default color input as HEX

I am coding a form that has an input type color. When you click that, you see a colorpicker, and the rgb values of the default color. I would like to know if there's a way to have HEX colors as default. As in this example. By default it looks as the left part of the image, and I would like it to be as in the right part of the image. I don't know if this is possible. Thank you :)

Upvotes: 10

Views: 30368

Answers (3)

Ali Muhammad
Ali Muhammad

Reputation: 31

you can you code below

    document.addEventListener('DOMContentLoaded', function () {
        // Get the color inputs and display spans
        const colorInput = document.getElementById('color_input');
        const colorHexDisplay = document.getElementById('color_hex_display');
        const fontColorInput = document.getElementById('font_color_input');
        const fontColorHexDisplay = document.getElementById('font_color_hex_display');

        // Update hex display when the color changes
        function updateHexDisplay(input, display) {
            display.textContent = input.value; // Always display the current value in hex
        }

        // Event listeners for real-time updates
        colorInput.addEventListener('input', function () {
            updateHexDisplay(colorInput, colorHexDisplay);
        });

        fontColorInput.addEventListener('input', function () {
            updateHexDisplay(fontColorInput, fontColorHexDisplay);
        });

        // Initialize display with current values
        updateHexDisplay(colorInput, colorHexDisplay);
        updateHexDisplay(fontColorInput, fontColorHexDisplay);
    });
<div class="row">
    <!-- Color Picker for Background Color -->
    <div class="col-md-6 form-group">
        <label class="form-control-label">Color<span class="text-danger">&nbsp;*</span></label>
        <input type="color" class="form-control @error('color') is-invalid @enderror" id="color_input" name="color"
            value="{{ old('color', '#ffffff') }}" required>
        <small class="form-text text-muted">Selected Color: <span id="color_hex_display">#ffffff</span></small>
        @error('color')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
        @enderror
    </div>

    <!-- Color Picker for Font Color -->
    <div class="col-md-6 form-group">
        <label class="form-control-label">Font Color<span class="text-danger">&nbsp;*</span></label>
        <input type="color" class="form-control @error('font_color') is-invalid @enderror" id="font_color_input"
            name="font_color" value="{{ old('font_color', '#000000') }}" required>
        <small class="form-text text-muted">Selected Font Color: <span
                id="font_color_hex_display">#000000</span></small>
        @error('font_color')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
        @enderror
    </div>
</div>

Upvotes: 0

Ant
Ant

Reputation: 1163

The color picker is provided as is by the browser, same way dropdowns appear as the browser has defined.

While there is a way to change some of it's appearance, you can not go as deep as you want. Also let me note that what you are seeing is how chrome shows the color picker, other browsers show it quite differently, if you open it in Firefox or Safari it will be different. If you want to go deeper into that topic, I found this article which is quite in-depth.

If you however want a much more customized user experience you could search for javascript color picker libraries and find one that suits your needs best or even write a custom implementation for it.

Upvotes: 9

Hữu Phong
Hữu Phong

Reputation: 1603

Color Picker by Default cannot set the HEX as default. You can use this library for better, it has many type of Color Picker that matches your needs.

https://casesandberg.github.io/react-color/

enter image description here

Upvotes: 4

Related Questions