Input Color - CSS Improvement
abhishek-junghare opened this issue · comments
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)
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>