Highlight <table> column on :hover using CSS with no Javascript
While HTML allows the :hover
pseudo-class on <tr>
elements, unfortunately the same does not hold true for <col>
elements. All solutions I’ve seen to highlight columns in tables involve Javascript.
I’ve tried to solve this with CSS a couple of times before with no luck. I recently saw this question on Stackoverflow, ::after
pseudo-element and no Javascript.
I saw another question looking for just a column solution, firefoxFix()
below takes care of this.
Demo: http://jsfiddle.net/ThinkingStiff/2XeYe
CSS:
table { border-spacing: 0; border-collapse: collapse; overflow: hidden; z-index: 1; } td, th, .ff-fix { cursor: pointer; padding: 10px; position: relative; } td:hover::after, .ff-fix:hover::after { background-color: #ffa; content: '\00a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }
HTML:
</pre> <table> <tbody> <tr> <th></th> <th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th> </tr> <tr> <th>160cm</th> <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> </tr> <tr> <th>165cm</th> <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> </tr> <tr> <th>170cm</th> <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td> </tr> <tr> <th>175cm</th> <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td> </tr> </tbody> </table> <pre>
Firefox Fix:
function firefoxFix() { if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) { var tds = document.getElementsByTagName( 'td' ); for( var index = 0; index < tds.length; index++ ) { tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>'; }; var style = '<style>' + 'td { padding: 0 !important; }' + 'td:hover::before, td:hover::after { background-color: transparent !important; }' + '</style>'; document.head.insertAdjacentHTML( 'beforeEnd', style ); }; };
How to make a contenteditable <div> look like an <input> element or <textarea>
Webkit browsers (Chrome/Safari) have a very old, and still outstanding, bug (#38943) with the ::selection
pseudo-element: they totally ignore the background-color
property.
In my answer to contenteditable
attribute because the ::selection background-color
property is not ignored on <divs>
. The look of both <input>
and <textarea>
elements can be can be duplicated with a <div>
, contenteditable
, and some CSS.
I further expanded the code in my answer in <input>
and <textarea>
clones look nearly identical to their native counterparts on Chrome, Safari and Firefox. Opera and IE9 don’t look the same, but are still decent.
Demo: http://jsfiddle.net/ThinkingStiff/FcCgA/
CSS:
textarea { height: 28px; width: 400px; } #textarea { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 28px; overflow: auto; padding: 2px; resize: both; width: 400px; } input { margin-top: 5px; width: 400px; } #input { -moz-appearance: textfield; -webkit-appearance: textfield; background-color: white; background-color: -moz-field; border: 1px solid darkgray; box-shadow: 1px 1px 1px 0 lightgray inset; font: -moz-field; font: -webkit-small-control; margin-top: 5px; padding: 2px 3px; width: 398px; }
HTML:
<textarea>I am a textarea</textarea> <div id="textarea" contenteditable>I look like textarea</div> <input value="I am an input" /> <div id="input" contenteditable>I look like an input</div>
iPhone Notification Badge in CSS
In answering this question,
, on Stack Overflow, I expanded upon an earlier solution I had to this problem and made them expandable.These look good in webkit (and great on the iPhone), and pretty decent in -moz, -o, and -ms.
Demo: http://jsfiddle.net/ThinkingStiff/mLW47/
HTML:
<div class="badge">1</div>
CSS:
.badge { background: radial-gradient( center -9px, circle closest-side, white 0, red 26px ); background: -moz-radial-gradient( center -9px, circle closest-side, white 0, red 26px ); background: -ms-radial-gradient( center -9px, circle closest-side, white 0, red 26px ); background: -o-radial-gradient( center -9px, circle closest-side, white 0, red 26px ); background: -webkit-radial-gradient( center -9px, circle closest-side, white 0, red 26px ); background-color: red; border: 2px solid white; border-radius: 12px; /* must be 1/2 of ( border-width*2 + width ) */ box-shadow: 1px 1px 1px black; color: white; font: bold 17px/15px Helvetica, Verdana, Tahoma; height: 18px; /* height + padding-top must equal width */ padding-top: 2px; /* height + padding-top must equal width */ text-align: center; width: 20px; }
4 comments