css3

问题 I am trying to style placeholder text, but I can't seem to select it. If my input is this: <input id="search" class="search-query" placeholder="Placeholder text here" name="" value""> How can I select the placeholder text in css for styling? 回答1: ::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; } /* All modern browsers except IE and EDGE */ ::placeholder {

问题 How to change the colour of text when its selected by css/javascript in IE<9? As far as I know the ::selection doesn't work in IE<9. Can somebody help me out with this? Thanks in advance. 回答1: Quirksmode confirms this isn't supported in IE. I know of no alternative to this (CSS or JS) for IE. 来源： https://stackoverflow.com/questions/10249116/changing-colour-on-text-selection-in-ie9

问题 I have a container with a variable number of elements in it. The elements should be justified but with a fix space between (e.g. 20px ). That means the width of every element has to adapt. For example this: HTML <div class="container"> <div> <img src="..."> </div> <div> <img src="..."> </div> <div> <img src="..."> </div> </div> CSS div.container { text-align: justify; } div.container div { display: inline-block; margin-right: 20px; } div.container div img { width: 100%; } At the end it should

问题 I have a selection of squares (squares turned 45° to look like diamonds) which I want to use to make up a big diamond shape with a central red diamond. I am having issues organising the diamonds themselves and the href seems to fail. How do I position the responsive diamonds in a regular grid ? Her is my code: body { background: black; color: #000000; font: 13px georgia, serif; line-height: 1.4; font-weight: lighter; text-rendering: optimizelegibility; } #diamond { width: 0; height: 0; border

问题 I have a selection of squares (squares turned 45° to look like diamonds) which I want to use to make up a big diamond shape with a central red diamond. I am having issues organising the diamonds themselves and the href seems to fail. How do I position the responsive diamonds in a regular grid ? Her is my code: body { background: black; color: #000000; font: 13px georgia, serif; line-height: 1.4; font-weight: lighter; text-rendering: optimizelegibility; } #diamond { width: 0; height: 0; border

问题 I would like to do the next trick in my css file so that (height = width) without setting pixels. I want to do this so whatever the resolution of the browser is, to have same values on these two dimensions. #test{ height: 100%; width: (same as height); } I prefer to do it with css and not javascript. Thank you in advance. 回答1: The only CSS way of doing this at the moment (AFAIK) is using viewport relates values (vh / vw ) Support is not great at the moment: http://caniuse.com/viewport-units

问题 I'm trying to add a border to a div element in HTML. Below is my code. #container-border { border-width: 2px; border-color: red; } <div id="container-border"> ... </div> For some reason, the border doesn't show up. I had a look on a similar question (here) but I couldn't figure out why the border doesn't show up. Any suggestions please? Note: This snippet is a part of an HTML page. Additional code could be provided upon request 回答1: The default value of border-style is none . You need to set

问题 Microsoft Edge is not supporting filter: blur(); like it should. If I have an absolute positioned element with filter: blur(); , inputs that appear on top will go nuts, merging with the blur (fun to watch). Here's a Fiddle to show what happens. Works perfectly in Chrome and Firefox, but Edge turns into borderline epileptic. Just click the input and enjoy: https://jsfiddle.net/Cthulhu/3uz0Lpfz/2/ Here's a code example: <style> article { background: url(http://uzebox.org/wiki/images/1/19

问题 I found this CodePen solution for a sticky footer in a CSS Grid layout, but it has two problems for me: It is kinda ugly with min-height: 100% and height: 100% It only works with two elements in the body (a div and a footer) I need something that works with this HTML structure: <body> <nav>Some navigation buttons</nav> <main>The content</main> <footer>Copyrights and stuff</footer> </body> I don't really want to pack the <nav> and the <main> into a <div> , and I would love to do this in pure

问题 I'm trying to expand this div across with width of the browser. I've read from here that you can use {position:absolute; left: 0; right:0;} to achieve that as in the jsfiddle here: http://jsfiddle.net/bJbgJ/3/ But the problem is that my current #container has a {position:relative;} property, and hence if I apply {position:absolute} to the child div, it would only refer to #container . Is there a way to still extend my child div beyond the #container ? 回答1: I can think of five ways to