I have seen many things hinting at this possibility:
https://css-tricks.com/svg-text-typographic-designs/
SVG Scaling Text to fit container
http://www.petecorey.com/blog/2014/10/08/quest-for-scalable-svg-text/
https://discourse.wicg.io/t/auto-sizing-text-to-fit-container/1053/8
That first link is best, which shows how the text scales.
I have implemented a janky JavaScript version of this functionality, but I want to apply it to a lot of elements and I think SVG would be a better choice.
However, my attempt at copying the code from that first link doesn't end up with the same result, it doesn't work:
<head>
<style>
* {
padding: 0px;
margin: 0px;
}
/*div*/.ad-wrapper {
height: 0;
padding-top: 100%;
position: relative;
}
/*svg*/.ad {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: red;
color: black;
}
</style>
</head>
<body>
<div class="ad-wrapper">
<svg class="ad" xmlns="http://www.w3.org/2000/svg">
<text font-family="'proxima-nova', sans-serif">Mountain</text>
</svg>
</div>
</body>
Wondering what I'm doing wrong and how to fix it. I would like to have text centered in a responsive box (square even), where the padding on all sides of the text is proportionally the same as it scales up, without the need to use JavaScript at all.
Use always a viewBox attribute. A viewBox="0 0 100 100" will give you a square box. Give the text a x and a y. In this case you may use x="50" y="50" In order to center the text you may use text-anchor:middle;dominant-baseline:middle
* {
padding: 0px;
margin: 0px;
}
/*div*/.ad-wrapper {
height: 0;
padding-top: 100%;
position: relative;
}
/*svg*/.ad {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: red;
color: black;
}
text{fill:black;text-anchor:middle;dominant-baseline:middle}
<div class="ad-wrapper">
<svg class="ad" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<text x="50" y="50" font-family="'proxima-nova', sans-serif">Mountain</text>
</svg>
</div>
Related
Currently I have the situation as shown below in the snippet.
But now I want a triangle that is the same on every page. No matter how long the page is. So for example if the page is really long, then the triangle will at one point go out of the screen and there will be no more green background. (as shown here)
But the most important thing is that on every page the triangle/angle will be the same. How to do this?
$(document).ready(function() {
function waitForElement(elementPath, callBack) {
window.setTimeout(function() {
if ($(elementPath).length) {
callBack(elementPath, $(elementPath));
} else {
waitForElement(elementPath, callBack);
}
}, 300)
}
waitForElement("#leftdiv", function() {
// Initial background height set to be equal to leftdiv
$('#rightdiv').height($('#leftdiv').height());
// Initial triangle height set to be equal to leftdiv
$('#triangle').css('border-top', $('#leftdiv').height() + 'px solid transparent');
});
// When window resizes
$(window).resize(function() {
// Change height of background
$('#rightdiv').height($('#leftdiv').height());
// Change height of white triangle
$('#triangle').css('border-top', $('#leftdiv').height() + 'px solid transparent');
});
});
.container-general {
float: left;
position: relative;
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
float: right;
position: relative;
/*height is set in javascript*/
width: 30%;
background-color: green;
}
#triangle {
position: absolute;
height: 0;
width: 0;
bottom: 0;
left: -1px;
border-left: 10vw solid white;
border-right: 0px solid transparent;
/*border-top is set in javascript*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div id="triangle"></div>
</div>
You don't need JavaScript and jQuery at all for this, as long as you are willing to make minor changes to your markup:
Step 1: Update your markup
Wrap both your .container-general and .background-general with a common parent element
Use display: flex; overflow: hidden; on the parent. This has the effect of stretching the shorter background element to full height of .container-general
Step 2: Determine the fixed angle you want and set aspect ratio
Important note: If you want to keep the angle constant, you will need to know what angle you want. That will require one important trick: you want to keep .background-general the same aspect ratio in all cases, so the angle stays constant. Let's say you want it to be 60° (i.e. Math.Pi / 3): with some math, that means that the height of the .background-general should be this ratio relative to the width:
containerHeightRatioToWidth = Math.tan(Math.PI / 3) = 1.732052602783882...
There is a trick to preserve the aspect ratio: you simply set the padding-bottom of the background element. In this case, you want it to be padding-bottom: 173%); (we don't need absolute precision so we can drop the decimal points).
Here's a handy table on the height (in CSS percentages) you can use:
30deg: padding-bottom: 57%:
45deg: padding-bottom: 100%:
60deg: padding-bottom: 173%:
You can also precalculate the percentage in your browser console by pasting this:
var desiredAngleInDegrees = 60;
Math.tan(Math.PI * desiredAngleInDegrees / 180) * 100
The markup is structured as follows:
└─┬.wrapper
├──.container-general
└─┬.background-general
└─┬.background-general__background
├─::before (triangle)
└─::after (remaining fill)
To achieve the triangle effect, you have two approaches:
Step 3A: Use clip-path to trim the background element to look like a triangle
clip-path is very widely supported by modern browsers, with a notable exception for IE11 and Edge :/ This should do the trick: clip-path: polygon(100% 0, 0 0, 100% 100%);
.wrapper {
display: flex;
overflow: hidden;
}
.container-general {
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
position: relative;
width: 30%;
background-color: green;
overflow: hidden;
}
.background-general__background {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Triangle */
.background-general__background::before {
flex-grow: 0;
content: '';
display: block;
width: 100%;
padding-bottom: 173%;
background-color: white;
clip-path: polygon(0 100%, 0 0, 100% 100%);
}
/* Extra fill */
.background-general__background::after {
flex-grow: 1;
content: '';
display: block;
background-color: white;
/* Needed to fix subpixel rendering */
margin-top: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div class="background-general__background"></div>
</div>
</div>
Step 3B: Use an inline SVG as background image
For the greater browser compatibility, use an inline encoded SVG and stretch it to 100% width and 100% height of the parent.
We can create a simple 10×10px SVG of the following markup:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10">
<path fill="green" d="M0,0 L10,0 L10,10 z"></path>
</svg>
Note: The preserveAspectRatio="none" is required so that we can freely stretch the SVG beyond its usual aspect ratio. For more information of how the <path>'s d attribute works, see this article: The SVG path Syntax: An Illustrated Guide
Then, all you need is to stuff this short SVG markup as data:image/svg+xml for the background image of the background container, i.e.:
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><path fill="green" d="M0,0 L10,0 L10,10 z"></path></svg>');
See example below:
.wrapper {
display: flex;
overflow: hidden;
}
.container-general {
background-color: black;
height: 500px;
width: 70%;
}
.background-general {
position: relative;
width: 30%;
background-color: green;
overflow: hidden;
}
.background-general__background {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Triangle */
.background-general__background::before {
content: '';
display: block;
flex-grow: 0;
width: 100%;
padding-bottom: 173%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><path fill="white" d="M0,0 L0,10 L10,10 z"></path></svg>');
background-size: 100% 100%;
}
/* Extra fill */
.background-general__background::after {
flex-grow: 1;
content: '';
display: block;
background-color: white;
/* Needed to fix subpixel rendering */
margin-top: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container-general" id="leftdiv">
</div>
<div class="background-general" id="rightdiv">
<div class="background-general__background"></div>
</div>
</div>
A simple "border triangle" bind to vw units might do:
body {
min-height: 2000px;
}
#triangle {
position: absolute;
top: 0px;
right: 0px;
border-top: 100vw solid #ff0000; /* The height of the triangle */
border-left: 30vw solid transparent; /* The width of the triangle */
}
<div id="triangle"></div>
A fiddle to play with.
I am using Javascript to create an SVG element that contains a circle with a radius and a stroke thickness. The size and thickness may vary. I'm trying to create a square shaped div that would fit inside this SVG circle, so that I may add content inside the circle.
You can imagine the content to be anything from a text containing information about the circle, an anchor, or a button.
The rectangle must fit in the circle in so that all content is wrapped, and if there is no space, the content will be removed.
Here is the raw Sketch
<!-- A minified example of what the Javascript outputs -->
<svg viewBox="0 0 80 80" width="80" height="80">
<circle cx="40" cy="40" r="35"></circle>
</svg>
My main question is if it's possible to add this solely to the SVG element, and using something like the styling: left: 10%; top: 10%; width:50%; height: 50%, or if this would require more advanced CSS or Javascript trickery.
It's important to also mention that my circle has a radius of (svgWidth / 2) * 0.875 that is set from within the Javascript code.
Okay, thanks to #Sergiu I found the right mathematical equation to solve it, this was the primary issue. The code below is taken out of my Javascript code and shows how I create a rect that fits exactly like the square my image.
var squareSize = Math.sqrt(2) * radius - circleStrokeThickness;
var squareCenter = (svgWidth - squareSize) / 2;
this.rectangleContent = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
this.rectangleContent.setAttribute('x', squareCenter);
this.rectangleContent.setAttribute('y', squareCenter);
this.rectangleContent.setAttribute('width', squareSize);
this.rectangleContent.setAttribute('height', squareSize);
this.rectangleContent = $(this.rectangleContent).appendTo(this.svg);
This is not a div but it already answers all of the questions I had about the placement of the div.
I believe this is what you are looking for. You can resize the SVG and see everything resizes accordingly.
.container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.container svg {
fill: #dedede;
stroke: #000;
width: 200px;
height: 200px;
overflow: visible;
background-color: lightblue;
border: 1px solid blue;
}
.container svg g > .text-holder {
background-color: lightcoral;
}
.container svg g > .text-holder > p {
font-size: 12px;
}
.container svg g > circle {
cx: 50%;
cy: 50%;
r: 50%;
}
.container svg g > rect {
stroke: #f00;
x: 15%;
y: 15%;
width: 70%;
height: 70%;
}
<div class="container">
<svg viewBox="0 0 80 80">
<g>
<circle></circle>
<rect></rect>
<foreignObject class="text-holder" x="15%" y="15%" width="70%" height="70%">
<p xmlns="http://www.w3.org/1999/xhtml" style="font-size: 12px;">Text goes here</p>
</foreignObject>
</g>
</svg>
</div>
I've tried changing between <line> and <path> in case the percentage parameters made a difference. But I'm still getting the same issue where the <svg> won't line up with my <img>'s. My end goal is to basically have the 2 ends of the <svg> lock into the border of the <img>'s. Any advice would be amazing.
Pen
html:
<div class="svg-benefitsContainer">
<svg class="benefitSVG" height="500%" width="100%" preserveAspectRatio="none">
<line class="benefitSVG1" x1="15%" y1="15%" x2="20%" y2="32%" />
</svg>
</div>
<div>
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png" class="benefitsImgMed" />
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f014ec212d1131cf09fc/1510600724150/flash.png" class="benefitsImgLig" />
css:
body {
background-color: black;
}
.benefitsImgMed,
.benefitsImgLig,
.benefitsImgArr,
.benefitsImgNig {
position: absolute;
padding: 10px;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: solid;
}
.benefitsImgMed {
margin-left: 8%;
margin-top: 6%;
width: 13%;
}
.benefitsImgLig {
margin-top: 32%;
margin-left: 19%;
width: 13%;
}
.benefitsImgArr {
margin-left: 37%;
margin-top: 3%;
width: 13%;
}
.benefitsImgNig {
margin-left: 66%;
margin-top: 18%;
width: 13%;
}
.svg-benefitsContainer {
width: 100%;
height: 500%;
}
.benefitSVG {
position: absolute
}
.benefitSVG1 {
fill: none;
stroke: white;
stroke-width: 5;
/*L 125 315 q -20 200 115 190*/
}
Because SVG percentages work differently to HTML percentages.
The <svg> width and height are relative to its parent container width and height respectively.
The <line> x and width are relative to the SVG viewport width.
The <line> y and height are relative to the SVG viewport height.
The <image> left and top are relative to the browser width.
If you want it to be reliable, the safest solution is to put all of the objects in an SVG file together. It's a lot simpler to understand also.
body{background-color:black;}
line, circle {
fill: black;
stroke: white;
stroke-width: 0.5;
}
<div class="svg-benefitsContainer">
<svg class="benefitSVG" height="100%" width="100%" viewBox="0 0 100 100">
<line class="benefitSVG1" x1="14.5" y1="12.5" x2="25.5" y2="38.5" />
<circle cx="14.5" cy="12.5" r="8"/>
<image xlink:href="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png"
x="8" y="6" width="13" height="13"
class="benefitsImgMed"/>
<circle cx="25.5" cy="38.5" r="8"/>
<image xlink:href="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f014ec212d1131cf09fc/1510600724150/flash.png"
x="19" y="32" width="13" height="13"
class="benefitsImgLig"/>
</svg>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I was wondering if there is a way to fill a specific icon or sprite to a designated percentage - i.e. 20% or something like that. I am trying to create a responsive shape or image that will serve as fluid chart, of sorts. I know the below is not a great example - the svg is also in font form. I want to dynamically fill this image to a specified % in my code.
So let's say a data point reads 20%, I want the heart to fill with another color (e.g. color:#DA1C5C) up to 20%, leaving the rest the original color. The code I'm working with is using a straight icon font and not the image svg, but it's not hosted yet.
<div class="icon">
<i class="icon-doubleheart">
<img src="https://s3.amazonaws.com/yourcareassets/doubleheart.svg">
</i>
With SVG: fiddle
HTML:
<div class="icon">
<div id='blackIcon' class="icon-doubleheart">
<img src="https://s3.amazonaws.com/yourcareassets/doubleheart.svg"/>
</div>
<div id='holdci'>
<div id='colorIcon' class="icon-doubleheart">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<path class='newColor' d="M353.1,137c-37.2-17.2-85.9-1-103.1,36.1c-17.2-37.1-65.9-53.3-103.1-36.1c-27.5,12.7-45,39.2-42.7,72.8h0.2 c1.4,14.1,6.1,29.4,15.2,45.5c22.2,39.4,61.6,69.1,130.3,122.3c68.7-53.2,108.1-82.9,130.3-122.3c9.1-16,13.8-31.3,15.2-45.5h0.2 C398,176.2,380.5,149.7,353.1,137z"/>
<path class='newColor' d="M493.5,124c-11.1-34.6-36.2-62.5-70.5-78.6c-18.8-8.8-40-13.4-61.4-13.4c-45.8,0-87.4,20.7-111.6,54.2 c-24.2-33.5-65.8-54.3-111.6-54.3c-21.3,0-42.6,4.6-61.4,13.4c-34.4,16-59.4,44-70.6,78.6C0,144.3-3.9,173.4,6,209.7h0.7 c4.3,14.9,10.8,31,20.4,48.2c36.1,64.4,99.1,113.5,203.5,194.8l19.4,15.1l19.5-15.2C373.9,371.4,436.9,322.3,472.9,258 c9.7-17.2,16.2-33.3,20.4-48.2h0.7C503.9,173.4,500,144.3,493.5,124z M468.8,207.2h-0.7c-4,12.6-9.6,25.5-16.9,38.6 c-33.6,60-95.1,107.9-197,187.3l-4.2,3.3l-4.1-3.2C144,353.7,82.4,305.8,48.8,245.8c-7.3-13-13-25.9-16.9-38.5h-0.7 c-8-26.8-8.4-52.4-1-75.5c9-28,29.4-50.6,57.4-63.7c15.6-7.3,33.2-11.1,50.9-11.1c44.3,0,83.7,23.2,100.3,59.1l11.3,24.5l11.3-24.5 C277.9,80.2,317.2,57,361.6,57c17.7,0,35.3,3.8,50.9,11.1c28,13.1,48.4,35.7,57.3,63.6C477.2,154.8,476.8,180.4,468.8,207.2z"/>
</g>
</svg>
</div>
</div>
</div>
CSS:
.icon {
width: 10em;
height: 10em;
}
#blackIcon {
width: 100%;
height: 100%;
}
#holdci {
margin-top: -100%;
overflow: hidden;
width: 0;
height: 99%;
}
#colorIcon {
width: 10em;
height: 10em;
}
.newColor {
fill: #DA1C5C;
}
JS:
var fill = 0;
var update = setInterval(function() {
fill += 1;
if (fill <= 100) {
$('#holdci').css('width', (fill+'%'));
} else {
clearInterval(update);
}
}, 100);
With pure CSS:
HTML:
<div id='Icon'>
<div id='IconText'>f</div>
<div id='fillIcon'></div>
</div>
CSS:
#Icon {
position: absolute;
width: 2em;
height: 2em;
border: 0.125em solid blue;
border-radius: 0.2em;
}
#fillIcon {
position: absolute;
z-index: 0;
width: 100%;
height: 0;
margin-top: 100%;
background-color: blue;
}
#IconText {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
line-height: 150%;
text-align: center;
color: #cccccc;
font-weight: bold;
font-family: consolas;
font-size: 1.5em;
}
JS:
var fill = 0;
var update = setInterval(function() {
fill += 1;
$('#fillIcon').css('height', (fill+'%'));
$('#fillIcon').css('margin-top', ((100 - fill)+'%'));
if (fill === 100) {
clearInterval(update);
}
}, 100);
With an image: fiddle
HTML:
<div id='Icon'>
<div id='IconText'><img style='width: 100%; height: 100%;' src='http://bellybusting.com.au/wp-content/uploads/2014/03/fb.jpg'/></div>
<div id='fillIcon'><img style='width: 2em; height: 2em;' src='http://getdesign.org/wp-content/uploads/2013/08/Facebook-icon-with-green-background-56.png'/></div>
</div>
CSS:
#Icon {
position: absolute;
width: 2em;
height: 2em;
}
#fillIcon {
position: absolute;
z-index: 2;
width: 100%;
height: 0%;
margin-top: 0;
overflow: hidden;
}
#IconText {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
line-height: 150%;
text-align: center;
color: #cccccc;
font-weight: bold;
font-family: consolas;
font-size: 1.5em;
}
JS:
var fill = 0;
var update = setInterval(function() {
fill += 1;
$('#fillIcon').css('height', (fill+'%'));
//$('#fillIcon').css('margin-top', ((100 - fill)+'%'));
if (fill === 100) {
clearInterval(update);
}
}, 100);
You can, here's 2 methods for your example of 20% width:
Method 1: HTML image
HTML:
<div>
<img src="myImage.jpg" width="135" height="155" class="responsiveImage">
</div>
And the CSS:
div {
max-width:100%;
width:20%;
}
img.responsiveImage {
width:100%;
max-width:100%;
height:auto /* only necessary to override the 'Height' attribute if imcluded */
margin:0 auto;
}
The results will be a scaleable hardcoded image. You can check out the Fiddle here.
If you want to use CSS for more control, you can use this instead:
Method 2: CSS background image
HTML:
And CSS, based on this helpful answer:
div.responsiveImage {
width:20%;
padding:12% 0; /* The 20:24 ratio of width to combined padding matches the dimensions of the image */
background: url(myImage.jpg) no-repeat top left;
background-position:50% 50%; /* Sets reference point to scale from */
background-size:cover;
border:solid 1px red;
}
Here's the fiddle of it in action.
The width and top and bottom padding is calculated by the ratio of width:height of the image you want to use. In the Fiddle examples, I've used one that is 135px wide by 155px high. To obtain the ratio, I used this:
(155/135)*100 = 114.814
This means the height is 114% the value of the width. Hence, if the width = 20%, the height is (20 * 114814)/100, or 23%. In my case, I split this into 2 by applying this equally as top and bottom padding (As monitors can't display half a pixel, I rounded it up).
Bear in mind that the padding value for the height of the image will change once it has a wrapper around it. Also, the overall height of the container will change if any content is added.
Sorry about not having an example, but basically I want to give an effect of having a text box crossed out, like being cancelled, etc.
Anyone got any ideas?
Alternatively, here is a pretty solution using SVG lines (no JS), which automatically scales to the dimensions of your text-area. It can also be applied over img elements for example.
JSFiddle: http://jsfiddle.net/xbbzcsrk/
HTML:
<div class="crossed">
<textarea>This is a test</textarea>
<svg>
<line x1="0" y1="100%" x2="100%" y2="0" />
<line x1="0" y1="0" x2="100%" y2="100%" />
</svg>
</div>
CSS:
.crossed {
position: relative;
width: 200px;
height: 80px;
}
.crossed svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.crossed svg line {
stroke: rgb(255, 0, 0);
stroke-width: 2;
}
.crossed textarea {
width: 100%;
height: 100%;
box-sizing:border-box;
}
Here's another possible method, this one using the HTML5 canvas element to draw an 'x' over the textarea.
http://jsfiddle.net/rmqJf/
Since I started working on it a bunch of other, answers popped up, some of them pretty similar. Lots of options to go with!
I place the textarea directly on top of the canvas (of the same size), then use rgba() with alpha 0 on the background of the textarea to make the background transparent so you can see the canvas underneath.
Looking through these though, I'm inclined to feel like the background image solution suggested by #Ragnarokkr and sussed out by #kalpesh patel may be the simplest solution, if executed right.
The code for mine:
HTML:
<canvas id="myCanvas" width="200" height="100"></canvas>
<textarea id="myTextArea"></textarea>
JS:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
CSS:
html, body {
margin: 0;
padding: 0;
}
#myCanvas {
padding: 0;
margin: 0;
width: 200px;
height: 100px;
}
#myTextArea {
position: absolute;
left: 0px;
right: 0;
height: 102px;
width: 202px;
background: rgba(255,255,255,0);
padding: 0;
margin: 0;
}
Adding this one as a new answer because I think it works better than my initial response:
http://jsfiddle.net/QrLLA/
only a few lines of code this time.
The HTML:
<textarea id="myTextArea"></textarea>
The CSS:
#myTextArea {
display: block;
background-image: url('http://i.imgur.com/4zKm6.png');
background-size: 100% 100%;
width: 200px;
height: 100px;
}
Just uses a image of an 'x' that I made in MS Paint as the background image for the textarea; the background-size: 100% 100%; property allows for re-sizing.
Screenshot:
This still enables the textarea to be written in; I'm not sure if that would be desired behavior in your case or not.
the screenshot:
html
<div class="con">
<div class="input-con"><input type="text" value="text example" /></div>
<div class="strip top-bottom"></div>
<div class="strip bottom-top"></div>
</div>
css
.con {
position: relative;
}
.strip {
margin-left:2px;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
border-width: 0 0 1px 0;
border-color: red;
border-style: solid;
width: 145px;
transform-origin:top left;
-ms-transform-origin:top left;
-moz-transform-origin:top left;
-webkit-transform-origin:top left;
}
.top-bottom {
margin-top: 2px;
transform:rotate(8deg);
-ms-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-webkit-transform:rotate(8deg);
}
.bottom-top {
margin-top: 1.2em;
transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-webkit-transform:rotate(-8deg);
}
.input-con > input {
line-height:1.2em;
width:146px;
}
You could create an image (one diagonal line) and set the textbox's background with that image (horizontally repeating if you want):
You can try out this:
Markup:
<div class='canceled_input_container'>
<input type='text'/>
<span></span>
</div>
CSS:
div.canceled_input_container {
position:relative;
height:30px;
}
div.canceled_input_container span{
position:absolute;
background-image: url("/path/to/image");
background-repeat: no-repeat;
height:/*background image height*/
width:/*background image width*/
top:-15px;
z-index:1;
}
This is just to guide you and does not contain final solution, you have to set position and other properties as per your requirement.
Well, this is will work in most browsers:
Empty: ☐ ☐ ;
Checked: ☑ ☑ ;
Disabled: ☒ ☒ ;
Add colors to make it looks even more disabled.
http://jsfiddle.net/tylerbrownhenry/NRHY5/
Here you go. For the markup...
<input type='text'/>
Then using jquery, you can either make this a function or a callback, but this is what you should run to add the 'X' to the input field. I'm just using 'input' as the selector but you can change it to fit your need.
I just wrapped the input with a div, and then put another div inside that div. The z-index of the child div should be higher than the input field, so that it will lay on top.
var input = $('input'),
divWidth = input.width();
input.wrap('<div class="ex" style="width:'+divWidth+';"></div>').before('<div class="exMark exImage"></div>');
Then I don't want to post the entire css that was in the jsFiddle. Because I used a dataUri so I didn't have to upload an an image, but you can just make the background-image whatever 'X' image you want.
.ex{
z-index:10000;
width:0px; /* This will get overwritten by the javascript */
}
.exMark{
width:150px;
z-index:1000;
height:2px;
position:absolute;
}
.exImage{
position:absolute;
width:150px;
height:50px;
background-repeat:no-repeat;
background-image:url('x.jpg');
}
Hope that helps!
<hr id="linethru" width="100%" color="black" >