I am having an issue getting a text input box to work correctly on Chrome. It works as it should in Firefox; however, in Chrome it is completely unresponsive. It does not display the hover effect or even allow you to type into the box. My first thought was I am missing a webkit, but I am not sure which one. (I am fairly new to CSS/html). See the code I am using below:
As you can see, it works as it should if you run the snippet.
input[type="text"] {
display: block;
margin: 0;
width: 60%;
font-family: arial;
font-size: 12px;
color: #e2e2e2;
appearance: none;
box-shadow: none;
border-radius: none;
}
input[type="text"]:focus {
outline: none;
}
.promocode input[type="text"] {
padding: 10px;
margin-left: 1px;
border: solid 0px #2c303b;
background-color: rgba(74, 80, 99, .5);
transition: box-shadow 0.3s, border 0.3s;
transition: background-color 0.3s ease-in-out;
-webkit-transition: box-shadow 0.3s, border 0.3s;
-webkit-transition: background-color 0.3s ease-in-out;
-moz-transition: box-shadow 0.3s, border 0.3s;
-moz-transition: background-color 0.3s ease-in-out;
-o-transition: box-shadow 0.3s, border 0.3s;
-o-transition: background-color 0.3s ease-in-out;
}
.promocode:hover input[type="text"] {
background-color: rgba(74, 80, 99, .8);
}
.promocode input[type="text"]:focus,
.promocode input[type="text"].focus {
border: solid 0px #2c303b;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, .25);
}
<div id="promoMsgPane" class="alignLeft" style="font-size: 12px; text-align:left; padding-top: 2em; margin-left: 0px;">
<p style="margin-bottom: 15px;">Enter your promo code below</p>
</div>
<div id="PromoIDPane">
<div class="input-list promocode clearfix">
<input id="txtPromoID" placeholder="Enter code" type="text" />
</div>
</div>
Related
I have textbox and label. I want to display side by side and want to width: 100% for text (so I need this :text width change when page size change) but I didn't.
this is my code :
<div class="col-xs-6 col-md-6">
<div class="form-group clearfix">
<label for="UxSearch">Search:</label>
<input type="text" name="UxSearch" id="UxSearch" class="form-control"/>
</div>
</div>
and this is my css class:
form-group {
margin-bottom: 15px;
}
.form-control {
display: block;
width: 100%;
height: 29px;
padding: 6px 12px;
font-size: 12px;
line-height: 1.25;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
width : 100% works but text and label are not in alignment (like photo)
but That's what I want :
I tried display: inline-block but not happend.
Can you help me please ?
col-xs-6 means in mobile div will take hafl width of the device screen(<768px)
.form-group {
display:inline-flex;
width:100%;
}
.form-control {
display: block;
height: 29px;
padding: 6px 12px;
font-size: 12px;
line-height: 1.25;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-6 col-md-6">
<div class="form-group clearfix">
<label for="UxSearch">Search:</label>
<input type="text" name="UxSearch" id="UxSearch" class="form-control"/>
</div>
</div>
I have a box with a triangle directly on top. Both are colored the same but upon hovering the box, the triangle's color remains without changing.
How can I change the color of the triangle?
[enter link description here][1]
.vw-post-box-read-more {
position: absolute;
right: 0;
top: 0;
bottom: 0;
line-height: 1em;
padding: 20px 15px 15px 15px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background-color: #393939;
/*background-color: rgba(255, 255, 255, 0.15);*/
}
.vw-post-box-read-more .triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
border-color: transparent transparent #393939 transparent;
}
<div class="triangle"></div>
<a class="vw-post-box-read-more" href="">
<span>Read More</span>
<i class="vw-icon icon-iconic-right-circle"></i>
</a>
EDIT: Sebastian Olsen helped me, thank you
You're trying to style the triangle as if it was a child of vw-post-box-read-more
Try this code:
.vw-post-box-read-more {
line-height: 1em;
padding: 20px 15px 15px 15px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background-color: #393939;
/*background-color: rgba(255, 255, 255, 0.15);*/
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
border-color: transparent transparent #393939 transparent;
margin-bottom: 20px;
}
.hover-box:hover > .vw-post-box-read-more {
background-color: red;
}
.hover-box:hover > .triangle {
border-color: transparent transparent red transparent;
}
<div class="hover-box">
<div class="triangle"></div>
<a class="vw-post-box-read-more" href="">
<span>Read More</span>
<i class="vw-icon icon-iconic-right-circle"></i>
</a>
</div>
I have something like this "http://jsfiddle.net/sogpgepg/" that works on Chrome and on Firefox. However I noticed the offset doesn't work on Internet Explorer and the outline is outside the picture and not inside it.
After some research I found out that Explorer doesn't support outline-offset!
Is there any way I can get the same effect (inside border) on Internet Explorer?
Script:
HTML
<div id="container">
<div class="inner">
<img src="http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg"/>
</div>
</div>
CSS
#container{
width: 300px;
height: auto;
margin: 0;
padding: 0;
}
.inner img{
width: 100%;
outline: 6px solid RGBa(255,0,0, 0.5);
outline-offset: -6px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.inner img:hover {
outline: 6px solid rgba(200,200,200,0);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
Here is an alternate for IE as shown in "http://css-tricks.com/"
Code:
<div class="inner-border">
Transparent Inside Border
</div>
CSS
.inner-border {
background: #000;
color: #fff;
margin: 50px;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 5px solid #000;
content: "";
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
JSFiddle Demo of the Above Code
Here is another example of Transparent Inside Border:
http://jsfiddle.net/chriscoyier/DvaqK/4/
Hope this will help!
One possible work around is to use an inset shadow.
I modified your fiddle somewhat.
http://jsfiddle.net/sogpgepg/1/
The changes I made are:
Make the <img> a background-image on .inner.
Move all styles from .inner img up to .inner
By setting the blur radius to 0 and specifying the spread radius, you can get a hard-edge 'border'.
This link includes more information on using shadows (particularly inset shadows): http://designshack.net/articles/css/inner-shadows-in-css-images-text-and-beyond/
Code:
#container {
width: 300px;
height: auto;
margin: 0;
padding: 0;
}
.inner{
width: 300px;
height:200px;
background-image:url('http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg');
box-shadow:inset 0px 0px 0px 6px rgba(255,0,0,0.5);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.inner:hover {
box-shadow: inset 0px 0px 0px 6px rgba(200,200,200,0);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
I currently have this JSfiddle.
HTML:
<div class="refTable">
<div class="refRow">
<div class="refCell"><img src="images/test.jpg" /><p>Test 1</p></div>
<div class="refSep"></div>
<div class="refCell"><img src="images/test.jpg" /><p>Test 2</p></div>
<div class="refSep"></div>
<div class="refCell"><img src="images/test.jpg" /><p>Test 3</p></div>
</div>
</div>
CSS:
.refTable {
display:table;
max-width:919px;
width:100%;
margin:0px auto;
}
.refRow {
display:table-row;
}
.refCell {
display:table-cell;
width:291px;
text-align: center;
font-size:16px;
border:1px #ffffff solid;
padding:0px 0px 10px 0px;
background:#eaeaea;
color:#333333;
-webkit-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
resize: none;
outline:0;
transition-duration: 0.2s;
}
.refCell img {
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
padding-bottom:5px;
}
.refCell p {
line-height: 20px;
}
.refCell:hover {
border-color:#b32f01;
background:#ffffff;
-webkit-transition: color background 0.2s ease-in-out;
-moz-transition: color background 0.2s ease-in-out;
-ms-transition: color background -0.8s ease-in-out;
-o-transition: color background 0.2s ease-in-out;
transition: color background 0.2s ease-in-out;
cursor:pointer;
color:#cacaca;
}
.refCell:hover img {
opacity:0.4;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity -0.8s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.refSep {
display:table-cell;
width:20px;
}
In the fiddle, no images display in the boxes. However, there normally would be. On hover, the boxes change background color, font color, and, provided there is an image, image opacity. That's fine.
Now, I would like to make it so that, on hover, an image or div "slides" up from the bottom/side/top that says "Visit this website", possibly with some sort of icon.
What is the best approach? I've really been thinking about it, but I can't come up with a solution.
I did this with just css :hover and css3 transitions.
This is the css I wrote,
.info {
position: absolute;
top: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
text-align: center;
-webkit-transition: top 0.6s ease-in-out;
left: 0;
color: #f7f7f7;
text-decoration: none;
}
.refCell:hover .info {
top: 0;
display: block;
}
I also added this to the .refCell class,
position: relative;
overflow: hidden;
The html I added,
<span class="info">Click to view website</span>
Here is the JSFIDDLE to see how it works.
I am trying to create a menu and style it. I have also used some css animations to show a description (span) when hovered. This menu is working properly under Firefox. But in Chrome, there's a white space above the menu. When I check the li tag through Firebug, its show me that the li element is not aligned properly. Its moved upward. Its not happening on firefox. (please check the screenshots below). How can I fix this?
Update : I have just uploaded the site to Heroku : http://aqueous-wildwood-4051.herokuapp.com/. You will see the issue in this live site.
In chrome :
In Firefox :
Here's the code of my sidebar :
<aside id="sidebar" role="complementary">
<nav id="side-nav" role="navigation">
<ul>
<li ><div id='side-nav-home' class='listitem'><span class='listtitle'>Home</span><span class='description'>Home page of SLNYAA</span></div></li>
<li ><div id='side-nav-about' class='listitem'><span class='listtitle'>About Us</span><span class='description'>Learn more about us</span></div></li>
<li ><div id='side-nav-handbook' class='listitem'><span class='listtitle'>Handbook</span><span class='description'>Read our handbook</span></div></li>
<li ><div id='side-nav-join' class='listitem'><span class='listtitle'>Join Us</span><span class='description'>Join our program</span></div></li>
</ul>
</nav>
</aside>
Here is the CSS :
#sidebar {
border-left: 1px solid #EDEDED;
box-shadow: -3px 0 9px rgba(217, 217, 217, 0.2);
float: right;
min-height: 365px;
width: 24%;
#side-nav{
ul {
margin-top: 0px !important;
height: 187px;
list-style: none outside none;
margin-left: 0;
padding-left: 0;
width: 100%;
li{
height: 46px;
a{
text-decoration: none;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px #757575;
border-right: 1px solid rgba(217, 217, 217, 0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
.listitem {
list-style: none outside none;
height: 32px;
text-align: center;
padding-top: 10px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
.description {
visibility: hidden;
position: absolute;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
position: absolute;
margin-left: 8px;
margin-top: 4px;
opacity: 0;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
-ms-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
&:hover {
text-align: left;
.description {
visibility: visible;
opacity: 1;
}
.listtitle{
margin-left: 7px;
border-right: 1px solid #FFFFFF;
padding-right: 7px;
}
}
}
}
}
#side-nav-home{
background-color: #ED0042;
border: 2px solid #E87998;
}
#side-nav-about{
background-color: #e1cf3b;
border: 2px solid #C4BD80;
}
#side-nav-handbook{
background-color: #009dda;
border: 2px solid #5EADCC;
}
#side-nav-join{
background-color: #6ba01e;
border: 2px solid #98AB7D;
}
}
}
}
Add display: block to the a CSS style
#main-container-border #main-container #sidebar #side-nav ul li a {
display: block;
text-decoration: none;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px #757575;
border-right: 1px solid rgba(217, 217, 217, 0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
jsfiddle