Remove the border inside color input - html

Demonstration: http://jsfiddle.net/WpJRk/
I have a color picker in my page using the new "color" type input:
<input type="color">
However, there is a black "border" inside the element which seems not able to be removed.
There is a 1px black box inside the field.
I don't really want the box inside. Doing this:
-webkit-appearance: none;
doesn't help.
Any solution?

Try the following CSS ruleset:
input::-webkit-color-swatch {
border: none;
}

Your jsFiddle doesn't show a box. (At least for me)

How about the following plugin instead?
http://jscolor.com/

I don't think you can do what you're attempting to do.
<input type="color"> is intended to show a color picker so for the element to denote that's what it does it defaults to black for the color. You can change the color value like you've done to match the background color (input type="color"> can't have an empty value), but you'll still have to contend with the border piece.

Related

Make sure each line in button has all the attributes

I'm trying to achieve the underline for all parts of my button. I tried using -webkit-box-decoration-break property, it didn't work.
Both first line (New Delhi,) and last line (India) should have underline. Since it's due to break in the box, I tried the box-decoration-break property, but it didn't work out. Please guide me where I am going wrong.
The only thing you can do is use text-decoration: underline. Think of a button and the text inside it as a box. The line you are trying to draw will always be at the sides of that rectangle. When the text is wrapped (e.g., because the box is not wide enough), the rectangle just increases in height and keeps drawing the line at the bottom. Have a look at this Mozilla doc about CSS text-decoration or this Mozilla doc about CSS border.
You can add border-bottom : 1px solid #cccccc;. and if it's too close to your element (e.g. button) you can add padding-bottom : 5px to solve your issue.

How to change text box font color if font color is white(default by theme)?

I installed triggered scrollbox and it's working but text box where you have to write your e-mail has white background and white font(font for whole theme is white). SO i would like to change it to any other color.
Thing is that i can't acces CSS to change it so i have to do it somehow in HTML but i don't know how.
This is the code:
[gravityform id="9" title="true" description="true"]
So question is how can I modify this gravity form code that change color of font?!
Vital information: other solutions can't help(CSS, etc.) bcs wordpress there is bought and it's pretty limited so i'm looking for a solution in HTML that can be implemented particulary in this line code.
You can set styles for input element in your HTML like this:
<input style="color: pink !important; background-color: black !important">
May be you need (may be not) to add !important to your styles to overwrite existing ones.
You can install plugin for custom css and add your custom css there to overide gravity form css.
Here is one simple plugin to do that: Cssor
Write the below css in your style.css
input{
color: #000; // if it is not applying, use ! important
}
It works for all input boxes

Pure CSS Checkbox without label

I've been looking for a way to easily style checkboxes even in those cases where I don't have labels but I haven't found any answer that completely satisfied me so I decided to try and find a way by myself so that all the others might find it useful.
This is what I ended up with.
CSS Checkbox without label
What I do is basically style the after elements and set pointer-events to none so you'll be able to click true the after element.
This allows us to let the checkbox handle the click and change its state from checked to unchecked and we'll then style the after element depending on the checkbox state.
This will be the unchecked style
.check:after{
pointer-events: none;
background: white;
content: ...
....
}
And then we'll have our checked style
.check:checked:after{
background: green; /* Change background and maybe image */
....
}
Please notice that the original checkbox will be still visible under the after element since we can't hide it (hiding it will end up hiding after and before elements too) so you can't play with transparency on your after element but you can still play with background image position and background color as I did in the example.
I hope this will help you with your styles! :)

Adding a :focus border to a text input, and getting rid of the default one

In css, I want to have a 2 pixel light blue border when a given textbox is in focus. I have the following:
form input.text:focus
{
border:2px solid #09F;
}
Pretty simple. The problem is, the default orange border can still be seen outside of my new blue one. How can I get rid of this?
I'm not sure it pertains to the outline property as it's usually blue, not orange (which browser are you on?). Anyway, try simply adding outline: none; to that ruleset.

multi radio buttons transformed into a radio button with css?

I want After click on the radio,
Radio-selected that background color is yellow putting background label, with use of css no js.
how is it?
Example of myself: http://jsfiddle.net/DVJmS/6/
Example of ui: http://jqueryui.com/demos/button/radio.html -> I not want use of plugin this is only a example.
Volia
What you need to do is:
wrap each <input /><label></label> in a <div>
give input[type="radio”] a width and height of 0px
Then add this rule to your css :checked ~ label {
background: #f00;
}
What that last one does is says if there’s a sibling of mine that is checked preceding me then make me have a background of #f00. Just change the alignment and colors to fit your site.
Also, you should never give two elements the same ID. If you want to be able to select two elements at once always uses classes.