This question already has answers here:
Change Bootstrap input focus blue glow
(21 answers)
Closed 5 years ago.
Is there any way to change/force checkbox glow color on focus?
$(function() {
$('input[type!=hidden]:first').focus();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
Redefine the css :focus property of checkbox:
input[type="checkbox"]:focus {
outline-color: green;
}
<input type="checkbox">
Related
I'm using toggle checkbox from semantic ui
Is there a way to change the background color of active toggle checkbox from blue to green?
I added the below CSS snippet in my CSS file, but its not working
.ui.toggle.checkbox input:checked, .ui.toggle.checkbox input:checked {
background: green!important;
}
Try this (I tried from page https://semantic-ui.com/modules/checkbox.html).
The trick was to really get more specific than the default rule they provide.
Ideally though, you shouldn't be tweaking css instead of actually compiling the parts you need after customizing it.
body {
margin: 20px !important;
}
.ui.toggle.checkbox input[type=checkbox]:checked~label::before,
.ui.toggle.checkbox input[type=checkbox]:checked:focus~label::before {
background: green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<body>
<div class="ui toggle checkbox">
<input type="checkbox" name="public" checked>
<label>Subscribe to weekly newsletter</label>
</div>
<body>
This question already has answers here:
Font Awesome 5 unicode
(3 answers)
Closed 3 years ago.
hi I am trying to change my style of the icon from a star with empty space inside to full star
but I can't do in inside the before and after only
.survery-test label:after {
content: '\f005';
font-family: fontAwesome;}
the problem is I can't change the style of the icon to a full star
it's free on font awesome and I can't change it like inside the class.
Solution:
I used another Fontawesome CDN by bootstrap
You will have to change the content of your class
.survery-test label:after {
content: '\f005';
font-family: fontAwesome;
}
.survery-test.empty label:after {
content: '\f006';
font-family: fontAwesome;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="survery-test">
<label></label>
</div>
<div class="survery-test empty">
<label></label>
</div>
This question already has an answer here:
Remove default focus outline and change to different color [duplicate]
(1 answer)
Closed 4 years ago.
I tried to remove the highlighted blue box in the following picture on clicking the input. It is not working. What's wrong here?
<link href="css/bootstrap-v3.5.5.min.css" rel="stylesheet" type="text/css">
<input type="text" class="form-control" placeholder="Enter here" readonly>
In css,
.form-control:focus {
outline: none;
}
First, ensure that your style comes after your Bootstrap styles so that it overwrites them. The box-shadow is set to none. Not sure if you also wanted the blue border to be removed on focus, so I've changed that too.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-control:focus {
box-shadow: none;
border: 1px solid #ccc;
}
</style>
<input type="text" class="form-control" placeholder="Enter here">
This question already has answers here:
Using HTML data-attribute to set CSS background-image url
(9 answers)
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 7 years ago.
I have a span class cor (color):
<span class="cor" data-c="red">red</span>
<span class="cor" data-c="green">green</span>
<span class="cor" data-c="blue">blue</span>
and cor style:
.cor{
padding:5px;
margin:5px;
}
What I want is the .cor background-color to be the color of the data-c element value. Can I style the .cor background based on the data-c value?
edit-------
it is not working:
background-color: attr(data-c);
You can do this with JQuery
$('.cor').each(function() {
var color = $(this).data('c');
$(this).css('background-color', color);
});
.cor{
padding:5px;
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cor" data-c="red">red</span>
<span class="cor" data-c="green">green</span>
<span class="cor" data-c="blue">blue</span>
This question already has an answer here:
input[type=number] placeholder color in FF29+
(1 answer)
Closed 8 years ago.
Is it possible to style the placeholder of an input field with type number in firefox?
Example code:
<input type="text" placeholder="foo">
<input type="number" placeholder="foo">
css:
input::-moz-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
http://codepen.io/anon/pen/yEtFB
In webkit the placeholder get's styled corretly. (with the webkit prefixed placeholder style)
You can achieve it by using below code. A working Demo
input[type="number"]
{color:red;}
Note:
In chrome it will not reflect until you define a initial value like below.
<input type="number" placeholder="foo" value="5">