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;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><spanid="color_front"></span><inputtype='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;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype='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><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="style.css"></head><body><inputtype="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 "