Background: I am trying to fix two annoyances in the appearance of the audio element in Chrome and while attempting to do so I came across two issues I would like to understand better. This is about Chrome 89 on MacOS. I nicely manage to style inside the audio element, using pseudo selectors. Finding out about the names of the pseudo selectors works nicely when looking inside of the shadow dom with the dom inspector. For example, the following two rules work exactly as expected:
::-webkit-media-controls-timeline {background-color:pink;}
audio::-webkit-media-controls-time-remaining-display {background-color:lightgrey;}
Question: However, two things do not work as expected and I want to understand why.
Problem 1: Styling the first letter in the remaining-display div does not work. The following rule is not effective.
audio::-webkit-media-controls-time-remaining-display:first-letter {color:white;}
This is astonishing, since the browser dispplays this
<style>div:first-letter {color:red;}</style> ... <div>e xample</div>
as expected. Why would I be unable to style the first letter? (The idea of this is to get rid of the most annoying leading / symbol in the remaining time display).
Problem 2:
Why would I be unable to style an element with a different pseudo attribute in a different part of the shadow DOM. More precisely the following rule is not effective:
::-internal-track-segment-highlight-before {background-color: blue;}
I see no difference to the other case above where the color styling worked. (The idea of this is to increase the too small contrast between two parts of the track segment.)
Add on: I managed to improved the contrast a bit using
audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}
but the issue remains why the one method worked and the other did not work.
You are using Chrome, with "Show user agent shadow DOM" turned on
There are 2 types of shadowDOM
let's call it "userland" shadowDOM,
the (open or closed) shadowDOM created by a (3rd party developer) Custom Element/Web Component
This type is available since the W3C Web Components standard was implemented
"user-agent" shadowDOM created by each Browser (Vendor),
implementing input , audio , video, select etc. tags
but each Browser can have a different implementation.
This shadowDOM content can only be accessed if the Browser vendor has enabled access. (with shadowParts or related tech)
And in general it can not be accessed.
WebKit does have some pseudo selectors to change some settings
See: Is it possible to style html5 audio tag?
But they are not CSS selectors that get you full access to shadowDOM by creating complex selectors.
Some Font and Styling settings do cascade into shadowDOM only to have a consistent style in the whole page.
See: https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/
So that is why your color:red works, and :first-letter doesn't
That is why filter works; and background-color doesn't
alternative
https://github.com/dascritch/cpu-audio is a decent Web Component replacing the standard <audio> tag, that gets you styling in all browsers
Note the notation: (open) not (user-agent)
video::-webkit-media-controls-timeline {
background-color: blue !important;
}
work better for highter contrast.
(tested in video tag)
I'm trying to find a list of elements that are tabbable.
Adding tab-index to elements make them tabbable.
Some elements are tabbable by default like <input>.
Is there a list of these elements that are tabbable by default?
And optionally, why are they tabbable by deault?
The easiest way to find answers to such questions is by looking at the spec
I believe the list you are looking for is:
a elements that have an href attribute
link elements that have an href attribute
button elements
input elements whose type attribute are not in the Hidden state
select elements
textarea elements
Editing hosts
Browsing context containers
To answer your optional question: they are "tabbable" by default for usability issues. If you follow the principals of making a good, user friendly app, it should allow for a consistent navigation and discoverability among other things.
So, by making them "tabbable", in the order they appear in code, the default behavior is to allow the user to complete a form from top to bottom, with minimal clicks and moving around, this making the "thinking process" about what should be filled next unnecessary
https://allyjs.io/data-tables/focusable.html is probably the most comprehensive list I've ever found. Not only does it go over what is "expected" by the spec but also how all major browsers actually behave.
At https://www.w3schools.com/tags/att_global_tabindex.asp, it talks about the tabindex attribute in HTML 4.01, and how only certain elements could enter the tab order through the tabindex attribute.
Those elements were: <a>, <area>, <button>, <input>, <object>, <select>, and <textarea>.
I've been working with tab stuff for a few months now, and that list seems to fit with I've noticed as naturally tabbable.
I want to set the input tag in my HTML document to rtl and their title attributes to ltr. Is it possible?
I do not believe the direction in which the text of the tooltip is displayed in (which is what I'm guessing what you meant by their title attribute) can be dictated through CSS.
The HTML specification simply states that browsers should display it in whatever fashion they wish, so the direction of the text in the tooltip would most likely be dependent on the user's own settings, probably at the Operating System level.
However, you can use JavaScript to create your own, non-native tooltips, which can then be styled through CSS.
When looking at most sites (including SO), most of them use:
<input type="button" />
instead of:
<button></button>
What are the main differences between the two, if any?
Are there valid reasons to use one instead of the other?
Are there valid reasons to use combine them?
Does using <button> come with compatibility issues, seeing it is not very widely used?
Here's a page describing the differences (basically you can put html into a <button></button>)
And another page describing why people avoid <button></button> (Hint: IE6)
Another IE problem when using <button />:
And while we're talking about IE, it's
got a couple of bugs related to the
width of buttons. It'll mysteriously
add extra padding when you're trying
to add styles, meaning you have to add
a tiny hack to get things under
control.
Just as a side note, <button> will implicitly submit, which can cause problems if you want to use a button in a form without it submitting. Thus, another reason to use <input type="button"> (or <button type="button">)
Edit - more details
Without a type, button implicitly receives type of submit. It does not matter how many submit buttons or inputs there are in the form, any one of them which is explicitly or implicitly typed as submit, when clicked, will submit the form.
There are 3 supported types for a button
submit || "submits the form when clicked (default)"
reset || "resets the fields in the form when clicked"
button || "clickable, but without any event handler until one is assigned"
This article seems to offer a pretty good overview of the difference.
From the page:
Buttons created with the BUTTON element function just like buttons
created with the INPUT element, but
they offer richer rendering
possibilities: the BUTTON element may
have content. For example, a BUTTON
element that contains an image
functions like and may resemble an
INPUT element whose type is set to
“image”, but the BUTTON element type
allows content.
The Button Element - W3C
Inside a <button> element you can put content, like text or images.
<button type="button">Click Me!</button>
This is the difference between this element and buttons created with the <input> element.
Quote
Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
From : http://www.w3schools.com/tags/tag_button.asp
If I understand correctly, the answer is compatibility and input consistency from browser to browser
I will quote the article The Difference Between Anchors, Inputs and Buttons:
Anchors (the <a> element) represent hyperlinks, resources a person can navigate to or download in a browser. If you want to allow your user to move to a new page or download a file, then use an anchor.
An input (<input>) represents a data field: so some user data you mean to send to server. There are several input types related to buttons:
<input type="submit">
<input type="image">
<input type="file">
<input type="reset">
<input type="button">
Each of them has a meaning, for example "file" is used to upload a file, "reset" clears a form, and "submit" sends the data to the server. Check W3 reference on MDN or on W3Schools.
The button (<button>) element is quite versatile:
you can nest elements within a button, such as images, paragraphs, or
headers;
buttons can also contain ::before and ::after pseudo-elements;
buttons support the disabled attribute. This makes it easy to turn
them on and off.
Again, check W3 reference for <button> tag on MDN or on W3Schools.
Although this is a very old question and might not be relevant anymore, please keep in mind that most of the problems that the <button> tag used to have don't exist anymore and therefore is highly advisable to use it.
In case you cannot do so for various reasons, just keep in mind to add the attribute role=”button” in your tag as of accessibility.
This article is quite informative: https://www.deque.com/blog/accessible-aria-buttons/
Quoting the Forms Page in the HTML manual:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
Use button from input element if you want to create button in a form. And use button tag if you want to create button for an action.
<button>
by default behaves like if it had a "type="submit" attribute
can be used without a form as well as in forms.
text or html content allowed
css pseudo elements allowed (like :before)
tag name is usually unique to a single form
vs.
<input type='button'>
type should be set to 'submit' to behave as a submitting element
can only be used in forms.
only text content allowed
no css pseudo elements
same tag name as most of the forms elements (inputs)
--
in modern browsers, both elements are easily styleable with css but in most cases, button element is preferred as you can style more with inner html and pseudo elements
As far as CSS styling is concerned the <button type="submit" class="Btn">Example</button> is better as it gives you the ability to use CSS :before and :after pseudo classes which can help.
Due to the <input type="button"> visually rendering different to an <a> or <span> when styled with classes in certain situations I avoid them.
It's very worth noting the current top answer was written in 2009. IE6 isn't a concern now days so <button type="submit">Wins</button> styling consistency in my eyes comes out on top.
I just want to add something to the rest of the answers here. Input elements are considered empty or void elements (other empty elements are area , base , br , col , hr , img , input , link , meta , and param. You can also check here), meaning they cannot have any content. In addition to not having any content, empty elements cannot have any pseudo-elements like ::after and ::before, which I consider a major drawback.
There is a big difference if you are using jQuery. jQuery is aware of more events on inputs than it does on buttons. On buttons, jQuery is only aware of 'click' events. On inputs, jQuery is aware of 'click', 'focus', and 'blur' events.
You could always bind events to your buttons as needed, but just be aware that the events that jQuery automatically is aware of are different. For example, if you created a function that was executed whenever there was a 'focusin' event on your page, an input would trigger the function but a button would not.
<button> is flexible in that it can contain HTML. Moreover, it is much easier to style using CSS, and the styling actually gets applied across all browsers. However, there are some drawbacks regarding Internet Explorer (Eww! IE!). Internet Explorer does not detect the value attribute properly, using the tag's content as the value. All of the values in a form are sent to the server-side, regardless of whether or not the button is clicked. This makes using it as a <button type="submit"> tricky and a pain.
<input type="submit"> on the other hand doesn't have any value or detection issues, but you can't, however, add HTML like you can with <button>. It's also harder to style, and the styling doesn't always respond well across all browsers. Hope this helped.
in addition, one of the differences can come from provider of the library, and what they code. for example here i'm using cordova platform in combination with mobile angular ui, and while input/div/etc tags work well with ng-click, the button can cause Visual Studio debugger to crash, surely by differences, that the programmer caused; note that MattC answer point to the same issue, the jQuery is just a lib, and the provider didn't think of some functionality on one element, that s/he provides on another. so when you are using a library, you may face an issue with one element, which you won't face with another. and simply the popular one like input, will mostly be the fixed one, just because it's more popular.
It's also worth mentioning , that the disabled attribute doesn't work well on button for ios- safari (see also - # Khris Vandal comment ).
This happened to me as well .