iCheck radiobox with white background - html

I am using iCheck to style my check- and radio boxes. I want to make the background of the radio box white. Currently its transparent and looks like this:
I thought it might be a good idea to edit the blue.png image
and to change the background from transparent to white. But now, the radio box is not smooth round anymore. This is how it looks now:
Is there any simpler/ better way to change the background to white? Do I really need to edit the blue.png?
Here is the code to produce the picture:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="/resources/vendor/icheck-1.x/skins/square/blue.css">
<style>
span{
margin-left: 10px;
color:#FFF;
}
label{
background-color: #08C;
border-radius:20px;
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<label for='name' >
<input type="radio" name='name' id='name'><span>Select this name</span>
</label>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"><\/script>')</script>
<script src='/resources/vendor/icheck-1.x/icheck.js'></script>
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-white',
increaseArea: '20%', // optional
});
});
</script>
</html>
Edit Here is the modified blue.png
You can download the uncompressed image here.

The simplest to change the style of those checkbox graphics than changing those images. It may be possible to achieve a similar effect in CSS using radial-gradient or border-radius following the selectors in blue.css to produce a circle, but you are better off editing the graphic of the theme itself.
Your image doesn't look smooth because you filled in the background in such a way that removes antialiasing.
Here's blue.png and blue#2x.png with the background filled in as you have done, preserving antialiasing, using GIMP.
Note that your style is hard to see over a white background.

There is simpler than changing the png for sure.
I added a background-color to the color I wanted in .icheckbox_square-xxx, .iradio_square-xxx by adding the following in my own css file.
.icheckbox_square-grey, .iradio_square-grey {
background-color: white;
}

Related

Can't change body background and body font at the same time [duplicate]

This question already has answers here:
Assigning multiple styles on an HTML element
(4 answers)
Closed 1 year ago.
Hey guys so basically I've been learning html and Css these past couple of days. I'm having trouble assigning a background color and font color at the same time.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" >
<title>Practice blog</title>
</head>
<body style="color: blue;">
<body style="background-color:lightblue;">
So basically if I put the background color one on top the font of the text won't change, only the background. If I put the one where it changes the font the background won't change. What can I do about that?
Congratulations on starting your journey with learning HTML and CSS!
Two things to keep in mind:
Each HTML file can have only 1 body tag. A good way to think of it is that one HTML file corresponds to one page and each page has one body!
Inline CSS isn't the prettiest way to learn and I think frowned upon. Making a separate CSS file and linking it to your HTML file will make learning a lot easier for you! Helped me a ton!
You need only one body:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice blog</title>
</head>
<body style="color: blue; background-color:lightblue;">
Some text to show colors
</body>
Apart from what others suggested, you could also use internal CSS to style the elements in the body without needing to use two body elements. What you need to do is embed the CSS code in the style tag of the head:
<html>
<head>
<style>
body {
background-color: blue;
color: yellow; /*or any colour of your own choice*/
}
</style>
</head>
<body>
<p> Paragraph whose colour will become yellow </p>
</body>
</html>
The code inside the style tags is called internal CSS which is an alternative way of styling the body elements. This is the easiest and simplest way of styling the body elements. Here's a demonstration:
body {
background-color: blue;
color: yellow;
}
<p> This is a simple paragraph </p>
The background-color will change the background colour of the body and the color will change the colour of the elements inside body i.e. paragraphs, headings etc.

Elements not showing up and :hover not working on a .svg [duplicate]

This question already has answers here:
img src SVG changing the styles with CSS
(26 answers)
Closed 4 years ago.
I'm trying to make certain paths of an svg change color on hover, but something seems to be really buggy about my code. When I try to add, for example, an inline .svg circle, it doesn't even appear, although text does. Hover doesn't work at all, I've tried a few different ways of doing it.
Here's my HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>User Map</title>
</head>
<body>
<div id="map">
<img style"width: 60%" src="world.svg" />
</div>
</body>
</html>
My CSS:
#map {
background:#3B475C;
position: relative;
width: 75%;
top: 15%;
left: 12.5%;
display: block;
}
.dot:hover {
fill: #000 !important;
}
And a link to my .svg, since it's large: scratchpad.io/anxious-frogs-1845
Here's the general logic behind the code right now:
world.svg is the image in the div. I don't want countries to change color, just pins that I'm putting on top of the map (although even when I try to apply :hover to just the whole thing, nothing happens). I'm trying to apply the "dot" class to all the pins, then in CSS, have all the dots have a hover function. I'm really confused as to why whole sections of code aren't doing anything, especially because they work fine when I've tried putting them in other test programs. If there's a way to maybe put the pins in another, overlaid SVG I could do that, but I'm not sure how to (it doesn't show up if I add a second svg and link it into the HTML) and that still doesn't explain why hover won't work and circles, etc don't show up when I add them to the html.
I'd really appreciate any help, I'm new to html and css (I've only used Java and Python before) and am pretty stuck on this problem.
Short answer: You can't style a SVG via the img tag. You need to put the SVG code inline.
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>User Map</title>
</head>
<body>
<div id="map">
<svg ...>
<!-- svg content -->
</svg>
</div>
</body>
</html>
Explanation: The img tag renders the SVG as a bitmap, so the SVG elements are not in the DOM and can't be selected through CSS.

How to make red color input box of error when no content is entered in box but the cursor is still in box using angular js?

I am trying to add validation in my form using angular js. I want the whole color of input box to be red color when there is an error. My issue is that in my form after getting error when I am removing the text and my cursor is inside the box , the color of box is blue and the border is of red color, i want the total box color should be red of border as well.Currently when I am clicking outside the box then only it is showing fully red and I need that if no text is there in box but still cursor is inside the box then also it should be showing error with whole box red color.
I am using below styling-
.registration-form .has-error .form-control, .registration-form .has-error .form-control:focus, .registration-form .has-error .form-control:hover, .registration-form .has-error .form-control:active{
border-color: red;
box-shadow: none !important;
background-color: red !important;
}
.registration-form label{
font-weight: normal;
}
.registration-form .form-group input[type="text"]:focus{
background-color:#18b6d6 !important;
}
Can anyone help me how can I achieve that?
I have created a plunker here-
https://plnkr.co/edit/fFYhRMioVOMCyXWSYvUJ?p=preview
.registration-form .form-group input[type="text"]:focus{
background-color:#18b6d6; // !important;
}
Just take off the !important and it works
I am assuming this is the blue glow for input fields accessibility? If so, it's been answered numerous times on StackOverflow.
input[type="text"], textarea {
outline: none;
box-shadow:none !important;
background-color:#18b6d6;
}
Include bootstrap library and it will automatically set the input box to red when it has errors:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
Simple demo:
angular.module('app', [])
.controller('mainCtrl', function($scope) {
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body ng-controller="mainCtrl">
<form novalidate name="form">
<div class="form-group" ng-class="{ 'has-error' : form.input.$touched && form.input.$invalid }">
<label>Input</label>
<input type="text" class="form-control" name="input" ng-model="input" required>
<span ng-if="form.input.$touched" class="help-block">Plan No. is required.</span>
</div>
</form>
</body>
</html>
Also, you can use ngMessages to validate your inputs, which becomes your application more flexible, I would recommend you to check this tutorial also.
I have a complete code using ngMessages here, take a look.
I hope it helps!!

Setting color to inside area of a checkbox

I am trying to set color to the clickable area of a checkbox using an inline CSS. I am using the below code
<html>
<head>
<body bgcolor="green">
<input type="checkbox" name="ch01" id="ch01" style="background-color: #FFFFC7;">
</body>
</head>
</html>
But it does not work, I have searched on the Net and on SO also, but could not find a solution. Could someone please suggest a solution, as to how I could set the color to the clickable area of the checkbox? I am ok with a javascript solution as well.
I think this cannot be possible with background-color property.
But you can do this by background-image
Here is the link, which can help you.
http://jsfiddle.net/jtbowden/xP2Ns/
instant of using default checkbox input tag use Div
HTML
<div style="width:10px;height:10px;" class="unchkd">
</div>
Checkbox
Javascript
$('div').on('click',function(){
if ($(this).hasClass('unchkd')){
$(this).removeClass('unchkd').addClass('chkd');
}
else {
$(this).removeClass('chkd').addClass('unchkd');
}
});
CSS
.chkd{
background-color:Red
}
.unchkd{
background-color:white;
border: 1px solid black
}

How to change background color of readonly textbox in css

How to change background color of readonly textbox in css
There are too many unkowns in your question. Which browser do you want support? If you say textbox you seem to use ASP.NET, but there is no tag at you question.
Generally said, the behaviour between the browsers are different.
Consider the following html
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="This is a test" style="background-color:Black; color:Lime;" />
</body>
</html>
IE8 renders the background color properly, but disabled controls will always have gray text with shadows. Mozille Firefox beside that renders the control correct and i am sure there will be difference all over the different browsers and even between the browser versions (IE6 would interprete the color values correctly too).
If you want to have a html regardless which browser you use, you have to use a span or other inline element, to format it with border and colors you want, instead of using a input element.
You could use
input[disabled="disabled"] { background:url("url-to-background-image.jpg") no-repeat #fff; }
and for older browser that doesnt support this selector, you can use jQuery to apply a class
$(document).ready(function() {
$("input[disabled="disabled"]").addClass('disabled');
});
And unless it's disabled all the time, you should provide js for removing the class along with js for enabling it.
you can try this
input:-moz-read-only { /* For Firefox */
background-color: yellow;
}
input:read-only {
background-color: yellow;
}
Hi This will surely work for your code. Just try this..
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="JavaScript is the best" style="background-color:Black; color:green;" />
</body>
You can change the background color in css using this code but before that make sure your html page is linked with your css page.
Body {
Background-color: red;
}
Hope this code will work for you.