I try to change the size of a checkbox in bootstrap. I try it like this:
css:
.big-checkbox {width: 100px; height: 100px;}
HTML bootstrap:
<label class="big-checkbox">
<input type="checkbox" name="optradio">Reeks
</label>
#section scripts{
<link href="#Url.Content("~/Content/Stickerprinter.css")" rel="stylesheet" type="text/css" />
}
But I dont see changing the size.
Using width and height you can't change the dimensions of an input checkbox. In this way change the area of click but checkbox remain the same.
You can use this:
input[type=checkbox] {
transform: scale(1.5);
}
Check the difference: https://jsfiddle.net/88v0gq20/
You can use for bootstrap this plugin: http://plugins.krajee.com/checkbox-x/demo
Or you could create custom checkbox like in this tutorial: https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
Try like this :
.big-checkbox > input {width: 100px; height: 100px;}
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>
I am using b-tooltip tags of BootstrapVue to show information. I want to increase the width of b-tooltip (for long text message), text alignment, etc . How can i do it (basically how can i style it)?
<b-button id="tooltip-target-1">
Hover Me
</b-button>
<b-tooltip target="tooltip-target-1" triggers="hover">
I am tooltip <b>component</b> content!
</b-tooltip>
If you're using SCSS in your project, then the easiest way for a global solution would be to modify the SCSS variables to your liking.
If you want to only apply styles to a specific tooltip, or apply something there isn't a variable for. You can use the custom-class prop on b-tooltip to supply it with a custom class, which allows you to style it to your liking.
If you're placing this CSS in a scoped style tag <style scoped> you will need to use a deep selector to target the subcomponents such as .tooltip-inner.
new Vue({
el: '#app',
})
.custom-tooltip > .tooltip-inner{
/* Removes the default max-width */
max-width: none;
/* Apply whatever other styles you want */
font-size: 150%;
padding: 10px;
}
/* This styling is just for the example */
#app {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.14.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.14.0/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-button id="tooltip-target-1">
Hover Me
</b-button>
<!-- Use the variant prop to use your theme colors -->
<!-- If you want a custom color, you can use CSS -->
<b-tooltip target="tooltip-target-1" variant="primary" custom-class="custom-tooltip" triggers="click">
I am tooltip <b>component</b> content!
</b-tooltip>
</div>
</div>
The trick to change styles of bootstrapvue tooltip.
<style>
.tooltip-inner {
max-width: 800px;
}
</style>
Don't use scoped in style because the component render the html of tooltip outside of app so if you put scoped your css will not work.
I have made a form in which I want to apply a different style to a particular Select Box in that form.
<style>
select#complaintSource
{
#import url("http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css");
#import url("http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
}
</style>
#if(select)
{
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
}
#endif
<form>
<select class="form-control selectpicker" data-show-subtext="true" data-live-search="true" id="complaintSource">
<option>1</option>
<option>2</option>
</select>
</form>
I want to apply the Style to this particular Select Box . At the moment it is applying to all of them.
Is there any reason that the OP here can't just do:
<style>
select#complaintSource {
/*enter Bootstrap [select] code only here, such as:*/
display: block;
width: 100px; /*and so on */
/*enter your custom select code here*/
color: green;
}
</style>
Where 'enter code here' would have 1) the relevant lines from Bootstrap, since it's only for select, and 2) the custom styles for it, placed inside as CSS.
There is no method that We Can Include Style Sheet to only select box in View. If you have applied the Style Sheet then you have to change CSS or Style your page accordingly. That's the only way.
I'm using the range slider from here: http://materializecss.com/forms.html
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
And I managed to change the color of the "thumb" that pops up when you click on the slider by using this:
input[type=range]+.thumb{
background-color: #400090;
}
And normally I can just inspect the element on chrome and get what class I have to change to change its color. For some reasons I can't figure out how to inspect the "dot" in the slider to find what class I have to add to change its color.
This is what I did to change the dot on the slider and the thumb bubble colors.
Screenshot and snippet attached
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<style>
input[type=range]::-webkit-slider-thumb {
background-color: red;
}
input[type=range]::-moz-range-thumb {
background-color: red;
}
input[type=range]::-ms-thumb {
background-color: red;
}
/***** These are to edit the thumb and the text inside the thumb *****/
input[type=range] + .thumb {
background-color: #dedede;
}
input[type=range] + .thumb.active .value {
color: red;
}
</style>
<form action="#">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
.noUi-connect {
background: black;
}
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
background: black;
}
.noUi-target.noUi-horizontal .noUi-tooltip {
background-color: black;
}
check out this pen by alexventuraio
you can also do
document.querySelector('.noUi-tooltip').style.background = 'black';
document.querySelector('.noUi-handle').style.background = 'black';
Use querySelector all to change all. CSS [" .noUi-handle{...} and .noUi... "] is not overriding.
I'm new to stack
The easiest way to figure this out is actually by looking through the source code. Hosted here (https://github.com/Dogfalo/materialize/blob/master/forms.html) in line 833 and here (https://github.com/Dogfalo/materialize/blob/master/sass/components/forms/_range.scss) on Github.
Between this and my Chrome DevTools, I have managed to change the background on the range input to #4286f4(substitute for you color) with this CSS declaration:
.noUI-connect {
background: #4286f4 ;
}
You may need to use the !important flag on the property. This changes the color of the slider between the two .thumb elements.
To change the color of the little "thumbs" on the slider:
.range-label{
background-color: desired-color;
}
If you would like to change the grey-color of the background(area outside selection), use this:
.noUI-background {
background: desired-color;
}
Additional Caveat: This solution was only tested on the noUiSlider implementation: http://materializecss.com/forms.html (scroll to Range section). I have not tested this on a plain HTML range element, and sadly need to get back to work.
EDIT:
Having tried to explore solutions on the plain html range input, it appears that there is tag with the class "value" on the slider, as a child of .thumb. Unfortunately, styling this has not led anywhere, leading me to believe that this is either a :before/:after css property, or that your answer lies between lines 73-83 of the 2nd link in the first paragraph.
I am upgrading our site so it is responsive.
At the moment a typical link of mine has a hard coded width for the onclick function:
An example of one I use is as follows:
<a href="#" onclick="return hs.htmlExpand(this, { width: 700 } )">
<b>This is the title</b></a>
<div class="highslide-maincontent" style="font-weight:normal">
This is where the content is
</div>
However I would like it to have that for when the resolution is over 500px, under and I would want it to have a width of 90%
Thank you
You can set the width of the popup using CSS instead of using the width variable in the onclick. Define width: 700px; for all browser widths, and override this with width: 90%; when the browser has a max-width of 500px.
Use an onclick without the width variable:
onclick="return hs.htmlExpand(this)"
Add this below the highslide.css file in the head section of your page:
<style type="text/css" media="all">
.highslide-html-content {
width: 700px;
}
</style>
<style type="text/css" media="(max-width: 500px)">
.highslide-html-content {
width: 90%;
}
</style>