Actually, I want to implement a text box as shown in the figure:
I want that the user should be able to enter the number in the required space. Note that it would be transparent so that the background is visible. A solution involving html5 canvas would also be good.
So, is it possible to do this? If so, how?
What have you tried so far? You pretty much answered your own question, make the input have a transparent background.
input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 2px solid black;
width: 20px;
}
jsFiddle
Set <input> border be only bottom side. Here is the demo, just like your picture shows.
Related
The problem is i need photoshop-like selection functionality. But when I add border to div that encloses the image, the image gets smaller by the thickness of the border x2.
How can i resolve that?
I tried, making
.picture-frame--image {
border: 5px solid red;
margin: -2px 0 0 -2px;
}
<div>
<img class="picture-frame--image" src="https://placehold.it/500x500">
</div>
<div>
<img src="https://placehold.it/500x500">
</div>
but the image is overlapping border, and i need otherwise. For some reason z-index won't work, i dont know why.
Accualy the best answer was made by cimmanon in nathaniel link.
I made:
img {
outline: 2px dashed violet;
outline-offset: -2px;
}
Thank you all for the answers. Really appreacie it.
It sounds like you need to add
* {
box-sizing: border-box;
}
to your css file. I'm not entirely sure though because you didn't post any code.
Check this site for more information: https://www.w3schools.com/css/css3_box-sizing.asp
I think what you are looking for are pseudo elements like ::after and ::before. With these you can add content around your element. But beware that these can only be applied to certain html tags. ::after MDN Documentation
See this StackBlitz
I'm having trouble styling two different styles of buttons. The first button should be a transparent background with a 2px border, and the next button is just foundation's default styling for buttons, i.e. no border. I thought that *{box-sizing: border-box;} would make it so that the buttons would come out to the same size regardless of padding/border/margin. I thought that maybe this wasn't working because I wasn't specifying a width/height, but even when I do that it just has the effect of pushing the normal button off alignment by 2px, and even still I want the buttons to be the natural width according to the text inside of them.
The easy solution for me is to just add a border on the normal button with the same color as the background, but then I end up having to also add styles for the border for hover, active, etc... just seems like there should be a better way. Am I doing something wrong here?
Here is a jsfiddle of where I'm at: http://jsfiddle.net/xa4d4bfv/
How about adding a border with transparent color.
a.button {
border: 2px solid transparent;
}
button outline class should be the following
.button-outline {
border:2px solid #222;
color: #222;
background-color: rgba(0,0,0,0.0);
padding: 0.9rem 2rem 0.9rem 2rem !important;
}
Suslov's answer is pretty good though, mine's alright if you leave the button the same size
I'm looking to achieve an effect where, when typing in a form, the textarea grows as you type, and adds an underline for each line of text.
See the effect in GIF form here:
Can this be easily accomplished just by using CSS? How might I go about this?
You can do that by using a <div contenteditable="true"> instead of textarea:
HTML:
<div contenteditable="true" class="validate[required,length[6,300]]
feedback-input" id="comment"
placeholder="Start writing your message here..."></div>
CSS:
.feedback-input>div{
padding: 2px 0;
line-height: 28px;
border-top: 1px solid #ccc;
}
.feedback-input>div:first-child{
margin-top: 5px;
}
.feedback-input>div:last-child{
border-bottom: 1px solid #ccc;
}
Demo
Adjust the CSS as you want.
You can implement the constant underlines by making a background image that has some blank space and an underline. Then set the image as background of your textarea and have it repeat. Lastly, set the line-height in CSS to be equal to the height of your background. The lines will now repeat along with the height of the text.
For the textarea resizing, you can use TrungDQ's answer or one of many libraries available through Google.
That's how cell selection looks in MS Excel:
Is it possible to have the similar border in regular HTML <table> so that the border overlaps near cells (if you look closely you'll see that the border is extended for about 1px each side over near cells)?
Yes, to a certain extent. I've only tested in Chrome, but this works: http://jsfiddle.net/q4Lcc/
td {
width: 120px;
height: 50px;
border: 1px solid gray;
}
td#test_td {
border: 3px solid black;
}
I don't know of a way to do it purely with tables, but one approach would be to use another div or text input that gets absolutely positioned over the table of data.
Here's a live example: http://jsbin.com/edehoc
I personally like this approach because it lets you use a familiar form element that has an expected style when it gains focus.
Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:
This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.
Here is the code I've been working with:
<STYLE type="text/css">
.mini_banner
{
display:inline;
border-bottom:30px solid blue;
border-left:0px solid transparent;
border-right:30px solid transparent;
}
</STYLE>
I wanted to apply this to a cell in a table. I also don't want to break compatibility with modern browsers. My "customers" (mostly internal people) are going to be primarily on IE8 or later but I don't want to limit myself if I can help it.
So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?
I would say that you'll have less headaches all the way around if you revert to using a single background image - in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:
.minibanner {
background: blue url(..images/notch.png) no-repeat middle right;
font-size: 1.5em;
}
The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.
If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.
UPDATE:
The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:
<div>
<p>Hello text</p>
<span></span>
</div>
Then in your CSS:
p {
background: blue;
color: white;
float: left;
padding: 0 20px;
height: 50px;
margin:0;
line-height: 50px;
}
span {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 0px solid transparent;
display: inline-block;
border-left: 50px solid blue;
}
See this JSFiddle.
The shape is based on this tutorial on CSS triangles. Now, I've only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.
I made it work without an extra span: jsFiddle
.mini_banner
{
width:18em; height:1.5em;
color:white; font-weight:bold; padding-left:0.5em;
margin-bottom:.5em;
}
.mini_banner:before {
display:inline-block; content:''; overflow:hidden;
width:17em; height:0;
margin-bottom:-1.5em; margin-left:-.5em;
border-bottom:1.5em solid blue;
border-right:1.5em solid transparent;
}
Tested in FF, Safari, Opera and IE. (Works in IE8, but not in IE7)