Skip to content Skip to sidebar Skip to footer
Home / Colors / Css / Html / Input / Javascript

Rounded

Post a Comment
Even though I made the rounded, when I input a value (at least on safari) it changes the circle to a square instead. How can I do this? thanks.

Solution 1:

My idea:

  1. create one inline-block <span>
  2. set input[type=color] to not visible.
  3. bind click event of <span> to trigger <input>.click().

Because <input> is not friendly for shape customization.

$("#colour").change(function(event) {
    console.log($(this).val());
    $("#color_front").css('background-color',$(this).val());
});

$("#color_front").click(function(event) {
    $("#colour").click();
});
input[type=color] {
    display: none;
}
span {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  background-color:red;
  display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="color_front"></span>
<input type='color' value='#fefefe' class='bar' id='colour'>

Solution 2:

In a similar situation earlier, what I did for this was to add two extra styles with pseudo-selectors ::-webkit-color-swatch and ::-webkit-color-swatch-wrapper.. Don't know the exact reason..Somehow got this answer at that time (probably from SO itself ;) )..

Add,

input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
}

See the snippet below..

$("#colour").change(function(event) {
    console.log($(this).val());
});
input[type=color] {
    width: 100px;
    height: 100px; 
    border-radius: 50%;
    overflow: hidden;
}

input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 50%;
    padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='color' value='#fefefe' class='bar' id='colour'>

UPDATE

I think I got the tutorial from which I got the solution.. Here is it..


Solution 3:

Use the following code, it will definitely work.

 input {
            width: 50px;
            height: 50px;
            border-color: black;
            color: black;
            background-color: #fff;
            border: none;
            cursor: pointer;

        }

        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 10px;
        }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="color" name="color-gradient-1" id="color1" value="#ff0000" />

</body>

</html>

Use the following code, it will definitely work

input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 10px;
}

Post a Comment for "Rounded "