search

jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
48.77k stars 3.93k forks source link

Input Color - CSS Improvement #3789

Open abhishek-junghare opened 2 months ago

abhishek-junghare commented 2 months ago

This is about Bulma | the Docs.

Overview of the problem

The <input class="input" type="color>" could be improved to look better with removed browser added border, padding, outline, etc.

The Left one is with added <style> and the right one is the default look. (Both with Bulma)

image

Steps to Reproduce

This is the default look we get (including Bulma)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>

<body>
    <input class="input" type="color" value="#f5f5f5">
</body>

</html>

Expected behavior

Added <style> for removing those unnecessary browser CSS rules that could be implemented in Bulma itself.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">

    <style>
        input[type="color"] {
            width: var(--bulma-control-height);
            min-width: var(--bulma-control-height);
            max-width: var(--bulma-control-height);
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden;
        }
        input[type="color"]::-webkit-color-swatch-wrapper {
            margin: 0 !important;
            padding: 0 !important;
        }
        input[type="color"]::-webkit-color-swatch {
            margin: 0 !important;
            padding: 0 !important;
            border: none;
        }
    </style>

</head>

<body>
    <input class="input" type="color" value="#f5f5f5">
</body>

</html>