I'm writing up some documentation for the keyboard shortcuts for some software. The documentation is in html/css/js. I'd like to have images (skeuomorphic?) of a control and c key instead of just having [ctrl] + [c]. I have seen this done on the web, but I am not finding any solutions with my web searches.
How can I render the Control and C keys as images using HTML/CSS/JS? I am happy to use a third party party library to achieve the effect.
The following CSS will style text wrapped in <kbd></kbd> tags exactly the same as the buttons you see here at StackOverflow.
CSS
kbd {
padding: .1em .6em;
border: 1px solid #ccc;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f7f7f7;
color: #333;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
border-radius: 3px;
display: inline-block;
margin: 0 .1em;
text-shadow: 0 1px 0 #fff;
line-height: 1.4;
white-space: nowrap
}
HTML
<kbd>⌘</kbd>+<kbd>X</kbd><br><br>
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd>
Output
⌘+X
Ctrl+Alt+Delete
There are pure CSS options for creating realistic, professional-quality key cap graphics. Google "keyboard key css", for a larger list, but my favorite is KEYS.css: it's super simple to use:
<link rel="stylesheet" href="keys.css" type="text/css" />
...
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>
renders as:
Related
I have developed a dark mode for my forum, but the moment I set the dark mode, and change the tab or refresh the page first the normal mode (or light mode) appears and in a few milliseconds it finally loads the g1 into the body class attribute, is there any way to eliminate the delay?
document.addEventListener('DOMContentLoaded', (event) => {
((localStorage.getItem('mode') || 'g1') === 'g1') ? document.querySelector('body').classList.add('g1') : document.querySelector('body').classList.remove('g1')
})
:root {/* Base principal */
--base1: #FFF;
--base2: #FAFAFA;
--base3: #F9F9F9;
--base4: #F7F7F7;
--base5: #F5F5F5;
--base6: #F0F0F0;
--base7: #EDEDED;
--borde1: #D3D3D3;
--borde2: rgba(0, 0, 0, 0.3);
--opacity1: rgba(249, 249, 249, 0.8);
--opacity2: rgba(0, 0, 0, 0.2);
--opacity3: rgba(255, 189, 149, 0.5);
--bg: url(https://i.imgur.com/E6Gmd5W.png);
--buscar: url(https://i.imgur.com/e1LpRR1.png);
--font1: #8C8C8C;
--font2: #FFF;
--sombra1: 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
--sombra2: 1px 1px 0 rgba(0, 0, 0, 0.2), 1px -1px 0 rgba(0, 0, 0, 0.2), -1px 1px 0 rgba(0, 0, 0, 0.2), -1px -1px 0 rgba(0, 0, 0, 0.2);
--colorp: #EC7209;
--colorp1: 255, 118, 0;}
.g1 {--base1: #111; --base2: #1C1C1C; --base3: #141414; --base4: #141414; --base5: #1C1C1C; --base6: #161616; --base7: #202020; --borde1: #000; --bg: url(https://i.imgur.com/1ehFdwl.png); --buscar: url(https://i.imgur.com/xqY0yy2.png); --sombra1: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; --colorp: #9E500C; --colorp1: 255, 118, 0; --opacity1: rgba(30, 30, 30, 0.6); --font2: #ECECEC}
.container {margin: 140px auto 0; width: 1000px; border: 20px solid var(--base4); outline: 1px solid var(--borde1); padding: 0; background: var(--base4)}
<div class="container"></div>
<a style="cursor: pointer" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'g1') === 'g1' ? 'bright' : 'g1'); localStorage.getItem('mode') === 'g1' ? document.querySelector('body').classList.add('g1') : document.querySelector('body').classList.remove('g1')">light/dark theme</a>
I had the same issue.
Just store the theme in a cookie and on the serverside you can check the cookie with $_COOKIE['...']
I am trying to custom the md-virtual-repeat-scroller with a cross browser solution without jQuery.
I learned that the angular-material team won't implement it : scrollBar: customize scrollbar UX per Material Design specifications. #5064
Is there someone who achieveed to do it ? For the moment I use this CSS solution using webkit but it's not supported everywhere.
.md-virtual-repeat-scroller::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: $grey;
}
.md-virtual-repeat-scroller::-webkit-scrollbar
{
width: 6px;
background-color: $grey;
}
.md-virtual-repeat-scroller::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: $primary;
}
Thanks.
I'm using Select2 to style my <select> boxes, but I can't seem to style the forced outline which Chrome applies to the style:
Problem:
I've tried several lines of (very unprofessionally, !important) CSS code, but so far I haven't come up with the solution, this is what i'm at right now:
CSS:
.select2 > *:focus, .select2:focus .select2 > *, .select2 {
outline-width: 0px !important;
}
For the sake of excluding potential problems, i'm definitely including this CSS file, after my regular select2.css
Also, a fiddle would be problematic, but I could provide one if really necessary
This seems to do the trick:
<style>
.select2-container *:focus {
outline: none;
}
</style>
Here is a plunk.
This works for me:
&.select2-container--focus {
outline: none;
}
That's because neither select2 or chrome use the outline property. Here is the actual definition of select:focus pseudo element in select2 (+bootstrap):
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
Try changing border and box-shadow instead :
.form-control:focus {
border-color: unset;
-webkit-box-shadow: none;
box-shadow: none;
}
Hope this helps, cheers.
It using box shadow, not outline, look at the inspector:
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
so you need to reset it
I have created a page in MVC Razor which includes one textbox, and which has autocomplete functionality. My problem is that the autocomplete results appear far below the textbox the first time it is used (as shown in this picture), but subsequently appears in the correct place (i.e., exactly below the textbox). Why this is happening?
My CSS is as follows:
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 2000;
float: left;
display: block;
min-width: 160px;
_width: 160px;
padding: 0px 0;
margin: 2px 0 0 0;
list-style: none outside none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
And my HTML is as follows:
<input class="contentPicker input-xxlarge ui-autocomplete-input valid"
id="Content" name="Content" placeholder="Select a content"
type="text" value="" autocomplete="off">
You should not overwrite any positioning css from jquery ui. Of course it's gonna make things behave weird.
The first time the list is showing, is reading your css, but subsequent searches are probably overwriting your css with inline styles
jquery-ui is a plug and play solution, if you include the jquery-ui css files in your page, you shouldn't need to do anything. They have a very advanced theme roller, that takes care of all styling for you, so you don't have to mess with it
I want to remove the Blue glow of the textbox and the border, but i don't know how to override any of the js or the css of it, check Here
EDIT 1
I want to do this because i am using the jquery plugin Tag-it and i am using twitter bootstrap also, the plugin uses a hidden textField to add the tags, but when i am using twitter bootstrap it appears as a textbox with glow inside a textbox which is a little bit odd
.simplebox {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
You can also override the default Bootstrap setting to use your own colors
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
input.simplebox:focus {
border: solid 1px #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
sets to bootstrap unfocused style
After doing some digging, I think they changed it in the latest bootstrap. The below code worked for me, its not simple box its form-control that I was using that was causing the issue.
input.form-control,input.form-control:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}
if you think you can't handle the css class then simply add style to the textfield
<input type="text" style="outline:none; box-shadow:none;">
Go to Customize Bootstrap, look for #input-border-focus, enter your desired color code, scroll down and click "Compile and Download".
this will remove the border and the focus blue shadow.
input.simplebox,input.simplebox:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}
http://jsfiddle.net/pE5mQ/64/
On bootstrap 3 there is a small top shodow on ios, could be removed with this:
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
-webkit-appearance: caret;
-moz-appearance: caret; /* mobile firefox too! */
}
Got it from here
Vendor prefixes aren't necessary at this point, unless you're supporting legacy browsers, and you could simplify your selectors by just referring to all inputs rather than each of the individual types.
input:focus,
textarea:focus,
select:focus {
outline: 0;
box-shadow: none;
}
HTML
<input type="text" class="form-control shadow-none">
CSS
input:focus{
border: 1px solid #ccc
}
.form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}
So far none of the answers helped me out in this thread. What solved it for me was
/*Shadow after focus - Overwrites bootstrap5 style for btn classes*/
.btn-check:focus + .btn-primary,
.btn-primary:focus {
box-shadow: 0 0 7px 7px rgba(4,220,93,255);
}
/*Shadow while clicking (Animation) - Overwrites bootstrap5 style for btn classes*/
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .25rem rgba(10, 102, 37, 0.493);
}