Design your own custom up and down arrow icons or buttons using CSS styling techniques

Is there a way to create "up and down" control buttons using only CSS and no background image?

I attempted to add CSS for arrows in "li.className:after or li.className:before", but it caused the main boxes to move.

Check out the Fiddle link to see the issue I am facing: http://jsfiddle.net/8usFk/

Here is the code:

HTML

<div class="positionCameras">
    <ul>
        <li title="Move Up" class="cameraLeft" id="cameraUp"></li>
        <li title="Camera" class="cameraIcon"></li>
        <li title="Move Down" class="cameraRight" id="cameraDown"></li>
    </ul>
</div>

CSS

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
}
.positionCameras li.cameraLeft:before {
    content:" ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}
.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraRight:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

If you require more information, feel free to ask.

Please provide suggestions on how to resolve this issue.

htmlcsscss-shapesarrow-keys

Answer №1

By applying the css property display: inline-block to the pseudo element, you are able to adjust its size accordingly.

Additionally, follow these steps:

  1. To center it, use text-align: center on the parent element.
  2. To vertically align it, set line-height: 20px (25px - 5px, which is half of the height of the pseudo element), and apply vertical-align: middle to the pseudo element itself:

View Demo

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align: top; /* UPDATE */
}
.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
    text-align: center; /* UPDATE */
    line-height: 20px; /* UPDATE */
}
.positionCameras li.cameraLeft:before {
    content: "";
    display: inline-block; /* UPDATE */
    width: 0;
    height: 0;
    vertical-align: middle; /* UPDATE */
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}
.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraRight:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

Answer №2

This particular feature will always center the arrows regardless of their size, eliminating the need for fixed value margins.

Check out the JSfiddle demo here

CSS

.positionCameras ul, .positionCameras li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align: top; /* added */

}
.positionCameras li.cameraLeft, 
.positionCameras li.cameraIcon, 
.positionCameras li.cameraRight {
    position: relative; /* added */
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
}

.positionCameras li.cameraIcon {
    cursor: default;
}
.positionCameras li.cameraLeft:before,
.positionCameras li.cameraRight:before{
    content:""; 

    /* Added for positioning magic */
    position: absolute; 
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);    
    transform: translate(-50%, -50%);  
    /* End of added code */

    width: 0;
    height: 0;
    border-style: solid;
}

.positionCameras li.cameraLeft:before {
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #007bff transparent;
}

.positionCameras li.cameraRight:before {
    border-width: 10px 5px 0 5px;
    border-color: #007bff transparent transparent transparent;
}

Answer №3

Make sure to include the following code snippet

vertical-align:top;

in your CSS styling for the div element.

Your CSS class should look something like this:

.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
    vertical-align:top;
}

By adding that line of code, everything should display correctly.

Check out the result here: http://jsfiddle.net/rhX87/

UPDATE

To ensure proper alignment of the image, add the following CSS:

position:relative;
bottom:11px;
left:7px;

within the 

.positionCameras li.cameraLeft:before
class.

With this adjustment, the image should be centered as desired.

View the updated version here: http://jsfiddle.net/rhX87/1/

I hope this explanation helps!

Answer №4

Another option is to utilize HTML character entities and achieve the desired result, as demonstrated in this Code Playground

Answer №5

Check out my basic HTML version. Don't forget to include the JavaScript function "incrementMyNumber()" for handling click events. The key here is the negative margin on the divs containing the arrows. You may have to adjust some numbers, but this layout works well in both IE and Chrome.

<table>
<td>
    <input type="text" id="myNumber" style="width:50px" value="5" />
</td>
<td>
    <table style="border-spacing:0px;margin-left:-2px;width:20px;">
        <tr>
            <td style="border:1px solid black;height:8px;background-color:#dcdcdc;cursor:pointer" onclick="incrementMyNumber(1)">
                <div style="margin:-5px;font-size:8px;">&#x25B2;</div>
            </td>
        </tr>
        <tr>
            <td style="border: 1px solid black; height: 8px; background-color: #dcdcdc;cursor:pointer" onclick="incrementMyNumber(-1)">
                <div style="margin:-5px;font-size:8px;">&#x25BC;</div>
            </td>
        </tr>
    </table>
</td>

Answer №6

VIEW DEMO

HTML Code:

<div class="cameraPositioning">
    <ul>
        <li title="Move Up" class="cameraLeft" id="cameraUp"></li>
        <li title="Camera View" class="cameraIcon"></li>
        <li title="Move Down" class="cameraRight" id="cameraDown"></li>
    </ul>
</div>

CSS Style:

.cameraPositioning ul, .cameraPositioning li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.cameraPositioning li.cameraLeft, 
.cameraPositioning li.cameraIcon, 
.cameraPositioning li.cameraRight {
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: #cccccc;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    box-shadow: 1px 2px 15px #cccccc;
    vertical-align:top;
}
.cameraPositioning li.cameraLeft:before,
.cameraPositioning li.cameraRight:before{
    padding:5px;
    color:#007bff;
    font-size:16px;
    line-height:25px;
}
.cameraPositioning li.cameraLeft:before{
    content:"▼";
}
.cameraPositioning li.cameraRight:before{
    content:"▲";
}
.cameraPositioning li.cameraIcon:before{
    content:"•";
    padding:5px;
    color:#111;
    font-size:48px;
    line-height:25px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrange the "See More" button in the Mat Card to overlap the card underneath

I'm currently working on a project that involves displaying cards in the following layout: https://i.stack.imgur.com/VGbNr.png My goal is to have the ability to click 'See More' and display the cards like this: https://i.stack.imgur.com/j8b ...

cssangular

Using jQuery, you can easily update the value of the nth-child(n) for a cloned element

Looking to duplicate an HTML element and assign new values to its child elements? Here's my current HTML structure: <div id="avator" class="avator" style="display:none"> <label><a href="/cdn-cgi/l/email-protection" class="__cf_email ...

htmljquerycss

What is the correct way to utilize Microdata fields?

I'm finding the process of creating a list of events on a page to be a bit perplexing. Does the URL in this example represent the current page or another page you are mentioning? <div itemscope itemtype="http://data-vocabulary.org/Person"> H ...

htmlmicrodata

When scrolling, dynamically change the background color by adding a class

I am looking to achieve a scroll effect where the color of the menu buttons changes. Perhaps by adding a class when scrolling and hitting the element? Each menu button and corresponding div has a unique ID. Can anyone suggest what JavaScript code I should ...

javascripthtmlcss

Using javascript, add text to the beginning of a form before it is submitted

I'm trying to modify a form so that "https://" is added to the beginning of the input when it's submitted, without actually showing it in the text box. Here's the script I have so far: <script> function formSubmit(){ var x ...

javascripthtmlforms

Struggling to understand why the PHP/HTML form with a file upload field is not successfully uploading

I've been staring at this code for the past two hours and I can't seem to spot the issue. It's probably something simple, as I keep getting an undefined index error, but it's eluding me. Could you please take a look with fresh eyes? He ...

phphtmlforms

Is it possible to make the li elements within my ul list display on multiple lines to be more responsive?

My credit card icons are contained within a ul. I have used the properties background-image and display:inline for the LIs, which display nicely on larger screens. Unfortunately, when viewed on mobile devices, the icons are cut off. My question is whether ...

htmlcsshtml-listsresponsive

Assigning active classes based on the href attributes of child <a> tags

I've created a navigation structure as follows: <ul class="page-sidebar-menu"> <li class="menu"> <a href=""> <span class="title">Menu Item</span> <span class="arrow"></span> < ...

javascriptjquerycss

Angular Igx-calendar User Interface Component

I need assistance with implementing a form that includes a calendar for users to select specific dates. Below is the code snippet: Here is the HTML component file (about.component.html): <form [formGroup]="angForm" class="form-element"> <d ...

javascriptangularhtmltypescriptbootstrap-4

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

I have a set of checkboxes and one is designated as "all." When this box is clicked, I want to automatically select all the other checkboxes in the same group. If the "all" box is clicked again, I would like to deselect all the other checkboxes. Currently ...

javascriptjqueryhtmlcheckbox

Are the references to clip-path: path() on MDN and other sources inaccurate?

I'm attempting to achieve a simple task by using clip-path with the path property and having it scale to fit the entire size of the containing div. After researching extensively, I came across mentions of the [geometry-box] property in some places, bu ...

css

Error message indicating that Element <> cannot be scrolled into view persisting despite attempting common troubleshooting methods

Currently, I am utilizing Selenium to create a web scraper for downloading multiple podcast episodes from Spreaker. # https://www.spreaker.com/show/alabamas-morning-news-with-jt for i in range(3): print("Click number: {}".format(str(i))) see_mor ...

pythonhtmlseleniumselenium-webdriverpodcast

Is there a way to extract and exhibit the text from an image using Python?

Could someone assist me in extracting only the text within the highlighted red area? I have been experimenting with Python but haven't been successful in achieving this. My goal is to create a script that prompts for an address, then opens Firefox (or ...

htmlpython-3.xseleniumtextdisplay

Is there a way to incorporate CSS into an element utilizing jQuery when only a class is available for identification, and when the time in the innerHTML is within a 5-minute range from the current time?

I have some HTML code that I need help with: <td class="mw-enhanced-rc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;18:10&nbsp;</td> My goal is to use JavaScript to make the time bold. $('td[class^="mw-enhanced-rc"]').eac ...

javascriptjqueryhtmlmediawiki

How to send parameters to Bootstrap modal using a hyperlink

I need help confirming the deletion of a datatable row using a Bootstrap modal dialog. When a user clicks on the delete link, I want a modal to appear asking for confirmation. Here is my code: <c:forEach items="${equipes}" var="equ"> ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

Animation controlled by a button

I'm working on a project that involves creating a cartoon version of a record player. I want to incorporate an animation where the play button on the side toggles the spinning motion of the record using webkit, while also starting the audio track. The ...

csswebkit

Using PHP variables in CSS styling

Let me explain the situation. In my index.php file, I have a class called 'rectangles' which includes properties for color and size. I defined a variable named $rectangle($rectangle=new rectangles('red',25);). Additionally, I include ...

phphtmlcssinclude

Contact Company by Sending Email According to Selected Product Dropdown Choice

If a customer selects a specific business option from the dropdown menu on the product page, I want to send the standard WooCommerce Order Confirmation Email to both the site admin and that selected business. Backpack $50 Choose an Option Business First ...

phphtmlwordpresswoocommerce

Transferring information from template to associated component

Is it possible to transfer data from a template to a component without the need for an event trigger like a button or form submission? For instance, in the code snippet provided, how can we pass the 'item' from the 'items' array to the ...

htmlcssangular

Enhanced browsing experience with personalized search suggestions

As a developer, I am aware that you have the ability to customize the browser's suggestions for various fields. For example, specifying that a field is for email and only suggesting values for email fields in the future. Is this functionality really ...

htmlbrowserautocomplete