I want the inner element (slot in this case) to fill the button up. It works in chrome but doesn't in FireFox. I think there might be use user-agent styles in FireFox. I can't specify how wide the button is because I don't know it's size (not fixed).
jsbin link to play around:
http://jsbin.com/pucapoxizi/1/edit?html,css,output
What I've got so far:
HTML:
<button>
<slot>abc</slot>
</button>
CSS:
button {
border: 0;
padding: 0;
background: red;
}
slot {
width: 100%;
background: green;
}
Screenshots
FireFox:
Chrome:
You need to remove the extra padding for firefox button:
button::-moz-focus-inner {
padding: 0;
border: 0
}
you need to write css on top of a css reset stylesheet,for example a button reset css
button {
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-appearance: button; /* for input */
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Related
http://codepen.io/anon/pen/wBaGgW
I currently have what a list of items and then a button next to them on the right:
The tooltip must appear on focus and the tooltip must appear on hover - this works but the problem is that when an item is focused (after clicking on it) - the following item cannot be accessed via mouse (because preceeding is item focused!):
The tooltip must disappear when the mouse over the tooltip itself, but the focus is forcing it stay.
The test-case is here: http://codepen.io/anon/pen/wBaGgW
can anyone offer a solution that does not have any javascript? Also, the html markup cannot be changed too much. Minimal changes to HTML are OK. Just trying to prevent too much as I'll most likely need to compensate other parts of the application to fit the html changes.
Here shows the tooltip:
button:hover>.tooltip,
button:focus>.tooltip,
button:active>.tooltip {
visibility: visible;
opacity: 1;
}
I can hide the tooltip doing the following:
button:focus>.tooltip:hover {
visibility: hidden;
opacity: 0;
}
But that causes a crazy flickering effect as the mouse moves within the area in which the tooltip would appear.
Keep in mind the restrictions:
No JavaScript
Compatibility with IE8+ (please note, the tooltip css is coming from our global module, and I dont have direct access to change it, I am working on a separate module that I can of course override because my css loads after the global css does)
Tooltip must appear below (unfortunately)
With those restrictions, I don't know of any way to resolve your issue perfectly.
As a workaround, you can change the tooltip to be a sibling of the button, instead of a child and use the CSS adjacent sibling selector. This makes it so that when a user clicks the tooltip, it loses focus from the button and the tooltip is hidden. This will require you to fix the position of the tooltip a little (I used margin-top as a quick fix).
Code
button:hover + .tooltip,
button:focus + .tooltip,
button:active + .tooltip {
visibility: visible;
opacity: 1;
margin-top:20px;
}
<ul>
<li><span>Lorem Ipsum Dlar Set</span>
<button>X
</button>
<span class="tooltip">Hello ToolTip
</span>
</li>
...
</ul>
Live example: http://codepen.io/anon/pen/azONYP
Based my answer on this: Answer
html
<button tooltip="Tooltip text">Test</buttoN>
css
[tooltip]:before {
position : absolute;
content : attr(tooltip);
pacity : 0;
}
[tooltip]:hover:before {
opacity : 1;
margin-top:10px;
}
Here is the Fiddle
Update
Fiddle now with focus.
Added pointer event: none;
IE8 YEP YEP
No Javascript YEP
Must be below YEP
when mouse leave the tooltip, it's needs to be removed completely? (like removing the ":focus")...beacuse if it's allow for the tooltip to be visible again after mouse leave so you can use:
button:focus>.tooltip:hover
{
background: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-indent: -9999px;
}
codepen: http://codepen.io/anon/pen/OPVNaW
Use <a> instead of buttons and style them as buttons.
/* `border-box`... ALL THE THINGS! */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 64px auto;
text-align: center;
font-size: 100%;
max-width: 640px;
width: 94%;
}
a:hover {
text-decoration: none;
}
header,
.demo,
.demo p {
margin: 4em 0;
text-align: center;
}
/**
* Tooltip Styles
*/
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
top: 150%;
left: 50%;
margin-top: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
top: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-bottom: 5px solid #000;
border-bottom: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* Show tooltip content on focus */
[data-tooltip]:focus:before,
[data-tooltip]:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1>CSS Simple Tooltip</h1>
<div class="demo">
<p>I’m a button with a tooltip</p>
</div>
Try refactoring your CSS to something like this:
button:hover>.tooltip,
button:active>.tooltip {
visibility: visible;
opacity: 1;
}
button:focus>.tooltip {
visibility: visible;
opacity: 1;
outline: none;
}
I'm trying create a custom drop down control and I need to hide the arrows from the native controls. I'm using the following CSS, which is working for Chrome and Safari, but not in Mozilla and IE.
select.desktopDropDown
{
appearance: none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
}
Here is a [jsfiddle][1].
Use this it will work but with IE10+ and for FF :
Your css should look like this:
select.desktopDropDown::-ms-expand {
display: none;
}
More about ::ms-expand.
Then for the rest :
select.desktopDropDown {
outline : none;
overflow : hidden;
text-indent : 0.01px;
text-overflow : '';
background : url("../img/assets/arrow.png") no-repeat right #666;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
Note: I hardcoded path "../img/assets/arrow.png" as background.
This should work good for you in IE, Firefox and Opera .
Bare-bones examples:
For I.E:
select::-ms-expand {
display: none;
}
For Firefox:
select {
-moz-appearance: none;
appearance: none;
text-overflow: ''; /* this is important! */
}
For Fx I use -moz-appearance: checkbox-container which works nicely.
So putting it all together the following should be sufficient for you:
select.desktopDropDown {
appearance: none;
-webkit-appearance: none;
-moz-appearance: checkbox-container;
border-style: none;
}
select.desktopDropDown::-ms-expand {
display: none;
}
In fact this trick is mainly required for IE10+ where the arrows are in the Metro style of Windows 8, even on Windows 7. Though Windows 8 users must be used to the style cause it's used through the OS. Anyway, I'd recommend instead of using:
display: none;
To use:
visibility: hidden;
Because, at least in IE, the former causes the blue line of the selected item to overlay the dropdown arrow when the select is focused, while the latter does not.
we can create custom by using css. tested on IE10, Mozilla and chrome borwser...
Working Example as below :
.customSelect {
position: relative;
}
/* IE11 hide hacks*/
select::-ms-expand {
display: none;
}
.customSelect:after {
content: '<>';
font: 17px "Consolas", monospace;
color: #333;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 11px;
/*Adjust for position however you want*/
top: 18px;
padding: 0 0 2px;
border-bottom: 1px solid #999;
/*left line */
position: absolute;
pointer-events: none;
}
.customSelect select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Add some styling */
display: block;
width: 100%;
height: 50px;
float: none;
margin: 5px 0px;
padding: 0px 24px;
font-size: 16px;
line-height: 1.75;
color: #333;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
-ms-word-break: normal;
word-break: normal;
}
<div class="customSelect">
<label>
<select>
<option selected> Select Box </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Last long option</option>
</select>
</label>
</div>
I want to remove the stylings from a textarea and leave it all white without any border or glow, if possible. I've tried with different stuff found here on SO, but nothing works (tried with FF and Chrome).
So, is it possible and if so how to do it?
What I've tried so far:
textarea#story {
// other stuff
-moz-appearance:none;
outline:0px none transparent;
}
textarea:focus, input:focus{
outline: 0;
}
*:focus {
outline: 0;
}
The glow effect is most-likely controlled by box-shadow. In addition to adding what Pavel said, you can add the box-shadow property for the different browser engines.
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
resize: none; /*remove the resize handle on the bottom right*/
}
You may also try adding !important to prioritize this CSS.
If you want to remove EVERYTHING :
textarea {
border: none;
background-color: transparent;
resize: none;
outline: none;
}
try this:
textarea {
border-style: none;
border-color: Transparent;
overflow: auto;
outline: none;
}
jsbin: http://jsbin.com/orozon/2/
You want a minimal textarea with no borders, or resize-drag-icon.
Both when not selected and when focus.
It's easy but you'll need to update rows attribute via JS as newlines are added or removed during text input.
Here is the CSS
textarea, textarea:focus
{
font-family: "roboto","Helvetica Neue",Helvetica,Arial,sans-serif; /* make your choice */
font-size: 11px; /* make your choice */
border: none;
background: transparent;
-webkit-appearance: none;
-moz-apperarance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
padding: 0px;
resize: none;
width: 100%;
overflow: hidden;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
in order to keep things working as expected (looking good) you have to programmatically set/update textarea's attribute rows to the count of \r\n in the the textarea contents plus 1 when the contents is set and when it's updated (user input / other)
I have a delete button inside a form element right next to an edit anchor link. The HTML code looks like:
<button type="submit">Delete</button>
Edit
I have used the following CSS to style these so the look identical:
/* From html5reset.org */
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* Custom*/
a {
text-decoration: none;
color: #EB8E0B;
}
a.button {
display: inline-block;
padding: 9px 15px;
background: #617798;
border: 0;
font: normal 18px/100% Arial, Helvetica, sans-serif;
color: #FFF;
}
/* From html5reset.org */
button, input, select, textarea {
margin: 0;
}
button {
width: auto;
overflow: visible;
}
/* Custom */
button[type=submit],
button[type=button] {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font: normal 18px/100% Arial, Helvetica, sans-serif;
color: #FFF;
}
This renders correctly in IE, Safari, Chrome but not in Firefox. In Firefox the height of the button element is greater than the anchor link.
Any ideas how I can fix this?
Firefox does something weird to button elements, try adding this:
button::-moz-focus-inner {
padding:0;
border:0;
}
I need to make a button look like a link using CSS. The changes are done but when I click on it, it shows as if it's pushed as in a button. Any idea how to remove that, so that the button works as a link even when clicked?
button {
background: none!important;
border: none;
padding: 0!important;
/*optional*/
font-family: arial, sans-serif;
/*input has OS specific font-family*/
color: #069;
text-decoration: underline;
cursor: pointer;
}
<button> your button that looks like a link</button>
If you don't mind using twitter bootstrap I suggest you simply use the link class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>
The code of the accepted answer works for most cases, but to get a button that really behaves like a link you need a bit more code. It is especially tricky to get the styling of focused buttons right on Firefox (Mozilla).
The following CSS ensures that anchors and buttons have the same CSS properties and behave the same on all common browsers:
button {
align-items: normal;
background-color: rgba(0,0,0,0);
border-color: rgb(0, 0, 238);
border-style: none;
box-sizing: content-box;
color: rgb(0, 0, 238);
cursor: pointer;
display: inline;
font: inherit;
height: auto;
padding: 0;
perspective-origin: 0 0;
text-align: start;
text-decoration: underline;
transform-origin: 0 0;
width: auto;
-moz-appearance: none;
-webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height */
-webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */
#supports (-moz-appearance:none) { /* Mozilla-only */
button::-moz-focus-inner { /* reset any predefined properties */
border: none;
padding: 0;
}
button:focus { /* add outline to focus pseudo-class */
outline-style: dotted;
outline-width: 1px;
}
}
The example above only modifies button elements to improve readability, but it can easily be extended to modify input[type="button"], input[type="submit"] and input[type="reset"] elements as well. You could also use a class, if you want to make only certain buttons look like anchors.
See this JSFiddle for a live-demo.
Please also note that this applies the default anchor-styling to buttons (e.g. blue text-color). So if you want to change the text-color or anything else of anchors & buttons, you should do this after the CSS above.
The original code (see snippet) in this answer was completely different and incomplete.
/* Obsolete code! Please use the code of the updated answer. */
input[type="button"], input[type="button"]:focus, input[type="button"]:active,
button, button:focus, button:active {
/* Remove all decorations to look like normal text */
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
/* Additional styles to look like a link */
color: blue;
cursor: pointer;
text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
border: none;
padding: 0;
}
try using the css pseudoclass :focus
input[type="button"], input[type="button"]:focus {
/* your style goes here */
}
edit as for links and onclick events use (you shouldn’t use inline javascript eventhandlers, but for the sake of simplicity i will use them here):
watch and learn
with this.href you can even access the target of the link in your function. return false will just prevent browsers from following the link when clicked.
if javascript is disabled the link will work as a normal link and just load some/page.php—if you want your link to be dead when js is disabled use href="#"
You can't style buttons as links reliably throughout browsers. I've tried it, but there's always some weird padding, margin or font issues in some browser. Either live with letting the button look like a button, or use onClick and preventDefault on a link.
You can achieve this using simple css as shown in below example
button {
overflow: visible;
width: auto;
}
button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: blue;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
-moz-user-select: text;
/* override all your button styles here if there are any others */
}
button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: black;
}
<button type="submit" class="link"><span>Button as Link</span></button>
I think this is very easy to do with very few lines. here is my solution
.buttonToLink{
background: none;
border: none;
color: red
}
.buttonToLink:hover{
background: none;
text-decoration: underline;
}
<button class="buttonToLink">A simple link button</button>
button {
text-decoration: underline;
cursor: pointer;
}
<button onClick="javascript:window.location.href='link'">Domain</button>