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>
Related
I am trying to blur the outline of a button without blurring the inside image. The blur filter only applies to the whole image, but I only want the blue outline to be blurred. basically apply the filter: blur(4px) but only on the outline
button:focus {
outline-color: #054EBA;
outline-width: 2px;
outline-offset: 5px;
}
What I have
What I want
You need to dispatch the blur effect to another container, it can be pseudo container.
example
button {
position: relative;
margin: 3em;
padding: 0em 0.35em;
color: white;
background: #000;
border-radius: 50%;
border: none;
font-size:2em;
}
button:focus:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
pointer-events: none;
border: solid #054eba 2px;
filter: blur(2px);
}
<button>?</button>
Select only the button and not the image inside
I need to draw an arrow, preferably using pseudo (:after or :before) elements. it is supposed to look like this:
But it looks like this:
This is my code:
HTML:
<div class="info">
<p>Learn about our technology<span class="arrow-right"></p></span></div>
CSS:
.arrow-right:after{
content: "";
display:inline-block!important;
width:0;
height:0;
border-left:14px solid #C8A962;
border-top:14px solid transparent;
border-bottom: 14px solid transparent;
}
Well of course it looks like that because you use a code just for the triangle part of the arrow.
You need to add the other part also. You can do that with the other pseudo-element before.
You can change and adjust 'width' 'height' 'color' and so on.
.arrow-right:after {
content: "";
display: inline-block !important;
width: 0;
height: 0;
border-left: 8px solid #C8A962;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
vertical-align: middle;
}
.arrow-right:before {
width: 20px;
height: 2px;
background: #C8A962;
content: "";
display: inline-block;
vertical-align: middle;
}
<div class="info"><a href="http://www.bay42.io" class="arrow1">
Learn about our technology<span class="arrow-right"></span>
</a></div>
You can try using arrow html code → for this purpose
<div class="info">
<p>Learn about our technology<span>→</span><p></p></div>
Looks like my comment got lost
You can use the character → . See : https://dev.w3.org/html5/html-author/charref you'll find the character entities that you need. for a pseudo, use content:"\2192"; + font-size to scale it
.arrow1::after {
content: '\2192';
/* little make up */
font-size: 2em;
/* whatever needed*/
padding: 0 0.5em;
/* whatever needed*/
vertical-align: -0.1em;
/* whatever needed*/
}
a {
text-decoration: none;
float:left;
clear:both
}
.arrow1:nth-child(2)::after {
content: '\21fe';
display:inline-block;
transform:scale(2,1);
}
.arrow1:nth-child(3)::after {
content: '\21d2';
display:inline-block;
transform:scale(2,0.8);
}
Learn about our technology
Another one stretched
or that one can be used and stretched too
p {
position: relative;
width: max-content;
}
.arrow-right:after {
top: 50%;
right: -50px;
position: absolute;
content: "";
display: inline-block !important;
width: 0;
height: 0;
border-left: 14px solid black;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
transform: translateY(-50%) scale(0.4);
}
.arrow-right:before {
content: "";
width: 25px;
height: 1px;
background: black;
position: absolute;
top: 50%;
right: -40px;
transform: translateY(-50%);
}
Try this. Change the colour to white.
I'm looking to achieve a slanted edge on my div. The problem I'm coming across is the simple code I found to accomplish this is not cross-browser compatible. In fact, it only shows in Chrome.
Can anyone advise on how to do the following so it works in ALL browsers:
clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
This effect would achieve:
Here's my entire CSS code:
.my-slanted-div {
position:absolute;
bottom:0;
left:0;
width:100px;
padding:10px 10px;
background-color:#eee;
font-size:20px;
clip-path:polygon(0 0, 70% 0, 100% 100%, 0 100%);
}
Can anyone help me out?
You can also skew pseudo-element, like this:
.my-slanted-div {
position:absolute;
bottom:40px;
left:0;
width:80px;
padding:10px 10px;
background-color:red;
font-size:20px;
}
.my-slanted-div:after {
width:50px;
background:red;
position:absolute;
height:100%;
content:' ';
right:-22px;
top:0;
transform: skew(45deg);
}
<div class="my-slanted-div">
TEXT
</div>
p.s. change angle, play with values...to get desired result...
Edit: Demo in context -> https://jsfiddle.net/Lbwj40mg/2/
This should do the trick using borders.
<div id="container">
<p id="text">Hello</p>
<div id="slanted"></div>
</div>
#container {
position: relative;
height: 200px;
width: 200px;
background:url(http://placehold.it/200x200);
}
#text {
position: absolute;
bottom: 15px;
left: 10px;
z-index: 1;
margin: 0;
}
#slanted {
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 0;
border-left: 75px solid #dedede;
border-right: 50px solid transparent;
border-bottom: 50px solid #dedede;
}
jsfiddle
I've made it work one way with :before and :after pseudos, you simply need to update the widths, heights and line-height to suit the size of tab you want; the rectangle must be the same height as the :before and :after bits for a clean look.
.box {
background: red;
width: 200px;
position: relative;
height: 100px;
line-height: 100px;
text-align: center;
margin-left: 50px;
color: white;
font-size: 21px;
font-family: arial, sans-serif;
}
.box:after {
position: absolute;
right: -50px;
content: '';
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
.box:before {
position: absolute;
left: -50px;
content: '';
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div class="box">
Text in the box
</div>
Here's a way with transform: rotate just to add to the list. Quite annoying as you will have to play with pixels for alignment and make some entries into #media rules for different screen sizes. But it should be fairly cross browser friendly (but maybe not opera mini)
body {
background-color: #333;
}
.container {
position: absolute; /* needs a position, relative is fine. abolsute just for this example */
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #ccc;
overflow: hidden; /* required */
}
.salutations {
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 0 15px;
background-color: #fcfcfc;
height: 50px;
line-height: 50px; /* match height to vertically center text */
font-size: 30px;
}
.salutations::before {
content: '';
position: absolute;
top: 21px; /* play with this for alignment */
right: -36px; /* play with this for alignment */
height: 40px; width: 70px; /* may need to adjust these depending on container size */
background-color: #fcfcfc;
transform: rotate(60deg); /* to adjust angle */
z-index: -1; /* puts the pseudo element ::before below .salutations */
}
<div class="container">
<div class="salutations">Hello</div>
</div>
P.S. May have to adjust a pixel or two, my eyes suck.
Browser Compatability
transform: rotate
pseudo elements (::before)
Fiddle
https://jsfiddle.net/Hastig/wy5bjxg3/
It is most likely it is an SVG scaled to always fit its text which is simple and quick way of doing it; if you must use CSS then you could always:
Set a gradient to the div from color to transparent so that it takes up most of the div and the transition of color is abrupt and not smooth like how a normal gradient looks.
create another div and using borders create a triangle to touch the other main rectangular div such as doing:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #fff transparent transparent transparent;
}
Using css you can generate an element that takes the shape of a triangle.
Css tricks has a post on that.
By making the .slanted class position itself relative, we can position the generated content on the right side of the slanted div using absolute positioning.
It'll take some fiddling to get the perfect result you want, but here's an example.
.slanted{
background: #007bff;
color: #fff;
position: relative;
display:inline-block;
font-size: 20px;
height: 25px;
padding: 2px 4px;
}
.slanted::after {
content: " ";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 29px 0 0 20px;
border-color: transparent transparent transparent #007bff;
position: absolute;
top: 0;
right: -20px;
}
<div class="slanted">Hello</div>
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>
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> */
}