Well I have searched and haven't found any information on this or whether it's even possible. Ok so if I make a registration form I have an email field such as this.
<input type="email" id="email"/>
Now easy stuff, but it's a simple html filter to filter out some bs entered in there before it goes server side. Now idk if you have seen it before but it's a generic arrowed box by the field. Doesn't look the greatest especially with my site layout. Is there any way to edit the look of this so called popup box/window?
Thanks!
You should be able to use the following styles in chrome:
/* The entire area of the popup including area outside the bubble shape */
::-webkit-validation-bubble{}
/* Portion above the bubble behind top arrow */
::-webkit-validation-bubble-arrow-clipper{}
/* The arrow at the top of the bubble */
::-webkit-validation-bubble-arrow{}
/* The area containing the validation message */
::-webkit-validation-bubble-message{}
It's referenced on this StackOverflow question.
Here's the default style:
/* form validation message bubble */
::-webkit-validation-bubble {
display: block;
z-index: 2147483647;
position: absolute;
opacity: 0.9;
line-height: 0;
-webkit-text-security: none;
-webkit-transition: opacity 05.5s ease;
}
::-webkit-validation-bubble-message {
display: block;
font: message-box;
min-width: 50px;
max-width: 200px;
border: solid 2px black;
background: -webkit-gradient(linear, left top, left bottom, from(#fbf9f9), to(#f0e4e4));
padding: 8px;
-webkit-border-radius: 8px;
-webkit-box-shadow: 4px 4px 4px rgba(204,204,204,0.7);
line-height: normal;
}
::-webkit-validation-bubble-top-outer-arrow {
display: inline-block;
position: relative;
left: 14px;
height: 0;
width: 0;
border-style: solid;
border-width: 14px;
border-bottom-color: black;
border-right-color: transparent;
border-top-width: 0;
border-left-width: 0;
}
::-webkit-validation-bubble-top-inner-arrow {
display: inline-block;
height: 0;
width: 0;
border-style: solid;
border-width: 10px; /* <border box width of outer-arrow> - <message border width> * 2 */
border-bottom-color: #fbf9f9;
border-right-color: transparent;
border-top-width: 0;
border-left-width: 0;
position: relative;
top: 2px; /* <message border width> */
left: 2px; /* <outer-arrow position> + <message border width> - <border box width of outer-arrow> */
}
Related
My designer just gave me the design with text areas with styled resize grabber. The question is: Can I style it or not ?
WebKit provides the pseudo-element ::-webkit-resizer for the resize control it automatically adds to the bottom right of textarea elements.
It can be hidden by applying display: none or -webkit-appearance: none:
::-webkit-resizer {
display: none;
}
<textarea></textarea>
This displays as follows in Chrome 26 on OS X:
Note: Adding display: none to ::-webkit-resizer doesn’t actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing, set the resize CSS property to none. This also hides the control and has the added benefit of working in all browsers that support resizing textareas.
The ::-webkit-resizer pseudo-element also allows for some basic styling. If you thought the resize control could use significantly more color you could add this:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
<textarea></textarea>
This displays as follows in Chrome 26 on OS X:
Instead of applying CSS to ::-webkit-resizer (which doesn't appear to be working in Chrome 56 or FireFox 51), you can create a "custom" handle using some markup. I found this example after a google search:
Custom CSS3 TextArea Resize Handle
Copied markup in case of future dead link:
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="drag the cyan triangle..."></textarea>
</div>
And the CSS from the example - of course, you can apply any style you like :
textarea {
position: relative;
margin: 20px 0 0 20px;
z-index: 1;
}
.wrap {
position: relative;
display: inline-block;
}
.wrap:after {
content:"";
border-top: 20px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(-45deg);
z-index: 1;
opacity: 0.5;
position: absolute;
right: -18px;
bottom: -3px;
pointer-events: none;
}
.pull-tab {
height: 0px;
width: 0px;
border-top: 20px solid cyan;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(-45deg);
position: absolute;
bottom: 0px;
right: -15px;
pointer-events: none;
z-index: 2;
}
textarea::-webkit-resizer {
border-width: 8px;
border-style: solid;
border-color: transparent orangered orangered transparent;
}
<textarea/>
Why not just show a background image?
http://jsfiddle.net/1n0d529p/
textarea {
background: url(https://image.flaticon.com/icons/svg/133/133889.svg)no-repeat rgba(71, 108, 193, 0.52) 99.9% 100%;
background-size: 12px;
}
I managed to do so this way:
.textarea-container:before {
content: '';
background-image: url(svg/textarea-resize.svg);
background-size: 16px;
background-repeat: no-repeat;
position: absolute;
width: 20px;
height: 20px;
bottom: 2px;
right: 0;
pointer-events: none;
}
Styling the resize grabber of textarea using #HorusKol's approach
Codepen url
textarea {
/* Ignore this part of code - basic textarea formatting */
margin-top: 20px;
margin-left: 20px;
width:300px;
padding:20px;
border:1px solid #CCC;
border-radius: 4px;
/* Comment below line to resize horizontal + vertical */
resize:vertical
/* Step 1 */
position: relative;
}
/* Step 2 */
.wrap {
position: relative;
display: inline-block;
}
/* Step 3 - - Sets the 1st line of resize icon */
.wrap:after {
content:"";
border-top: 2px solid #555;
width:16px;
transform: rotate(-45deg);
background:transparent;
position: absolute;
right: 1px;
bottom: 14px;
pointer-events: none;
border-radius:25%;
}
/* Step 4 - Sets the 2nd line of resize icon */
.pull-tab {
border-top: 2px solid #555;
width:10px;
transform: rotate(-45deg);
position: absolute;
bottom: 10px;
right: 1px;
pointer-events: none;
border-radius:25%;
}
/* Step 5 - Removes the default resizer grabber icon */
::-webkit-resizer{
display:none;
}
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="Customized resizer grabber...">
</textarea>
</div>
textarea {
resize: none;
}
<textarea cols="72" rows="14"></textarea>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have a jsfiddle here - http://jsfiddle.net/0nvns9Lj/1/
I've done what I need to do but don't know if it's the best way - I'm sure it should be easier.
I just need to create a play button so I have a circle containing a triangle.
It's working but seems like alot of messing for something simple
.wrap{
background: #ddd;
height: 300px;
position: relative;
}
.circle{
background: red;
border-radius: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin: -25px 0 0 -25px;
}
.circle_inner{
position: relative;
height: 100%;
}
.circle_inner:before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -7px;
}
You can (and should) do this simpler.
* { margin:0; padding:0 }
figure {
background: #ddd;
height: 200px;
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
figure button[name="play"] {
width: 50px;
height: 50px;
background: red;
border: none;
border-radius: 100%;
margin: auto;
cursor: pointer;
}
figure button[name="play"]:focus {
outline: 0;
border: 1px solid hsl(210, 58%, 69%);
box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}
figure button[name="play"]::after {
content: '';
display: inline-block;
position: relative;
top: 1px;
left: 3px;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}
<figure>
<button name="play"></button>
</figure>
Editable demo: http://jsbin.com/mipali/5
There is not much to improve.
Maybe you can use a special font like 'Webdings', and otherwise you can make a simple CSS triangle. In both cases you just need a simple element for the button, and a ::before pseudo-element for the shape. In the HTML and CSS below, both methods are shown.
Both buttons use a normal A element, so the buttons could (if you can find any url or useful onclick event to attach to it) still work as a normal link when you don't even have CSS (think about the visually impaired).
Moreover, the HTML doesn't contain any extra markup apart from the class names. No 'inner' element needed, and I think that's the most important improvement. The CSS isn't that much shorter than your's but I got rid of the 'inner' element, so the markup is completely clean.
And remember: if you want more complex shapes, you also have a ::after pseudo-element at your disposal. :)
/* Basic red round button properties */
.button {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: red;
color: white;
/* Hide the text 'play', which is present in the HTML document for accessibility */
font-size: 0;
}
/* Properties for the pseudo-element that almost every button will need.
You can just merge it into the style below if you are only going to have
the play button. */
.button::before {
content: "";
display: block;
position: absolute;
}
/* Play button properties using font */
.play1.button::before {
font-family: 'Webdings';
font-size: 28px;
content: '\25B6';
top: -2px;
left: 12px;
}
/* Play button properties using CSS shape */
.play2.button::before {
width: 0;
height: 0;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 15px solid white;
top: 10px;
left: 16px;
}
Play<br>
Play
I am trying to design this kind of header (like in the attached image) in my site with no success is any one can help please?
Header I am trying to design
Web site with this header
I create this:
html
<h1 class="ribbon">
<strong class="ribbon-content">CAPTURE|WEDDING PHOTOGRAPHY</strong>
</h1>
css
.ribbon {
font-size: 16px !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
width: 50%;
position: relative;
background: #ffffff;
color: rgb(134, 152, 158);
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #fff;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #000000 transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
fiddle
You can play with colors size etc.
Source for css: css ribbon
That is a Ribbon.
Knowing that, you can focus your Google search with amazing results:
3D Ribbon Generator
Ribbon Builder
Ribbon on CSS Tricks
Enjoy
My designer just gave me the design with text areas with styled resize grabber. The question is: Can I style it or not ?
WebKit provides the pseudo-element ::-webkit-resizer for the resize control it automatically adds to the bottom right of textarea elements.
It can be hidden by applying display: none or -webkit-appearance: none:
::-webkit-resizer {
display: none;
}
<textarea></textarea>
This displays as follows in Chrome 26 on OS X:
Note: Adding display: none to ::-webkit-resizer doesn’t actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing, set the resize CSS property to none. This also hides the control and has the added benefit of working in all browsers that support resizing textareas.
The ::-webkit-resizer pseudo-element also allows for some basic styling. If you thought the resize control could use significantly more color you could add this:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
<textarea></textarea>
This displays as follows in Chrome 26 on OS X:
Instead of applying CSS to ::-webkit-resizer (which doesn't appear to be working in Chrome 56 or FireFox 51), you can create a "custom" handle using some markup. I found this example after a google search:
Custom CSS3 TextArea Resize Handle
Copied markup in case of future dead link:
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="drag the cyan triangle..."></textarea>
</div>
And the CSS from the example - of course, you can apply any style you like :
textarea {
position: relative;
margin: 20px 0 0 20px;
z-index: 1;
}
.wrap {
position: relative;
display: inline-block;
}
.wrap:after {
content:"";
border-top: 20px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(-45deg);
z-index: 1;
opacity: 0.5;
position: absolute;
right: -18px;
bottom: -3px;
pointer-events: none;
}
.pull-tab {
height: 0px;
width: 0px;
border-top: 20px solid cyan;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transform: rotate(-45deg);
position: absolute;
bottom: 0px;
right: -15px;
pointer-events: none;
z-index: 2;
}
textarea::-webkit-resizer {
border-width: 8px;
border-style: solid;
border-color: transparent orangered orangered transparent;
}
<textarea/>
Why not just show a background image?
http://jsfiddle.net/1n0d529p/
textarea {
background: url(https://image.flaticon.com/icons/svg/133/133889.svg)no-repeat rgba(71, 108, 193, 0.52) 99.9% 100%;
background-size: 12px;
}
I managed to do so this way:
.textarea-container:before {
content: '';
background-image: url(svg/textarea-resize.svg);
background-size: 16px;
background-repeat: no-repeat;
position: absolute;
width: 20px;
height: 20px;
bottom: 2px;
right: 0;
pointer-events: none;
}
Styling the resize grabber of textarea using #HorusKol's approach
Codepen url
textarea {
/* Ignore this part of code - basic textarea formatting */
margin-top: 20px;
margin-left: 20px;
width:300px;
padding:20px;
border:1px solid #CCC;
border-radius: 4px;
/* Comment below line to resize horizontal + vertical */
resize:vertical
/* Step 1 */
position: relative;
}
/* Step 2 */
.wrap {
position: relative;
display: inline-block;
}
/* Step 3 - - Sets the 1st line of resize icon */
.wrap:after {
content:"";
border-top: 2px solid #555;
width:16px;
transform: rotate(-45deg);
background:transparent;
position: absolute;
right: 1px;
bottom: 14px;
pointer-events: none;
border-radius:25%;
}
/* Step 4 - Sets the 2nd line of resize icon */
.pull-tab {
border-top: 2px solid #555;
width:10px;
transform: rotate(-45deg);
position: absolute;
bottom: 10px;
right: 1px;
pointer-events: none;
border-radius:25%;
}
/* Step 5 - Removes the default resizer grabber icon */
::-webkit-resizer{
display:none;
}
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="Customized resizer grabber...">
</textarea>
</div>
textarea {
resize: none;
}
<textarea cols="72" rows="14"></textarea>
How to make a box with arrow in CSS?
Making round corner is easy. but any idea to make the arrow on left side without using image.
Is it possible to make possible with
only one elements <p>....</p>
body {
background: #ff004e;
padding: 40px
}
p {
background: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 250px;
height: 150px
}
<p></p>
Like this :
.arrow {
border: solid 10px transparent;
border-right-color: #FFF;
}
Demo : http://jsfiddle.net/sparkup/edjdxjf2/
UPDATE :
It can also be achieved without empty elements with the css property :before
element:before {
content: "";
position: absolute;
top: 50%; // half way down (vertical center).
margin-top: -15px; // adjust position, arrow has a height of 30px.
left:-30px;
border: solid 15px transparent;
border-right-color: #FFF;
z-index: 1;
}
Demo : http://jsfiddle.net/sparkup/y89f1te0/
hope it helps
Chris Coyier has an excellent roundup of the possible shapes built in CSS using a single element (and before/afters):
http://css-tricks.com/examples/ShapesOfCSS/
Standard Tool-tip
If you want a simple arrow, then you can add a pseudo element with border-right.
body {
background:#ff004e;
padding:40px;
}
p {
background:white;
border-radius: 10px;
width:250px;
height:150px;
position: relative;
display: inline-block;
}
p:before {
content:"";
position: absolute;
height: 0px;
width: 0px;
top: 60px;
left: -29px; /* 1px buffer for zooming problems while rendering*/
border-width: 15px;
border-color: transparent white transparent transparent;
border-style: solid;
}
<p></p>
FIDDLE 1
Flat edge Tool-tip
If you want a flat edge for arrow, try this :
body {
background: #ff004e;
padding:40px;
}
p {
background:white;
border-radius: 10px;
width:250px;
height:150px;
position: relative;
display: inline-block;
}
p:before {
content:"";
position: absolute;
height: 45px;
width: 16px; /* 1px buffer for zooming problems while rendering*/
top: 50px;
left: -15px;
background: white;
}
p:after {
content:"";
position: absolute;
height: 40px;
width: 15px;
border-radius: 0 40px 40px 0;
top: 75px;
left: -15px;
background: #ff004e;
box-shadow: 0 -45px 0 0 #ff004e;
}
<p></p>
FIDDLE 2
Use this online tool and you can do it without typing lot of code
http://www.cssarrowplease.com
My answer (with no flat edge),
added some calculation formula:
.mainBox {
border: solid 1px #e0e0e0;
}
.mainBox:before {
content:"";
position: absolute;
/*The right value must be calculated with: (top value of after) - (top value of before) = (right value of before) */
/*example: (-4px) - (-7px) = 3px*/
right: 72px;
/*The `top` value must be identical to border-width*/
top: -7px;
width: 0;
height: 0;
border-style: solid;
/*The `border-width` value must be identical to top*/
border-width: 0 7px 7px 7px;
/*The border color 3rd (#e0e0e0) value must be identical to its parent border color*/
border-color: transparent transparent #e0e0e0 transparent;
/*The (z-index of before) must at least one below the (z-index of after)*/
/*Example: (z-index of before) < (z-index of after) or 9998 < 9999*/
z-index:9998;
}
.mainBox:after {
content:"";
position: absolute;
right: 75px;
top: -4px; /*suppose to be identical to border-width*/
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: transparent transparent #fff transparent;
z-index:9999;
}
The basic rules are:
The before right value must be calculated with:
(after's top) - (before's top) = (before's right)
example: (-4px) - (-7px) = 3px
The before and after's top value must be identical to border-width.
The border color 3rd (#e0e0e0 in the example) value must be identical to its parent border color.
The before's z-index must at least one below the after's z-index.
example: (before's z-index) < (after's z-index) or 9998 < 9999.
The result:
a.right{ border-style: dashed;
border-color: transparent;
border-width: 0.53em;
display: -moz-inline-box;
display: inline-block;
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0; border-left-width: 1em;
border-left-style: solid;
border-left-color: #666;
left: 0.25em; }
the above code can be used for right arrow.
You can make use of span if u don't want to use a div.
span#pointer{border:solid 10px transparent;border-right-color:#fff;position:absolute;margin:-85px 0 0 -20px;}
http://jsfiddle.net/SSKwn/